Jquery: найти и заменить текст

Question

Я нашел код в ответе 9 этой цепочки , который заменяет текст в элементе. В моем случае текст находится в li внутри класса div:

<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

$('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));

У меня он работает в JSFiddle .

На самом сайте есть внешняя страница, загруженная с javascript (в которой мне нужно заменить одно слово). Я помещаю код между тегами <script></script> после скрипта, загружающего страницу, но не могу заставить его работать.

Итак, мой вопрос: где и как мне разместить этот код на реальной странице ?

Answer 1

$(document).ready(function(){
     $('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

Добавленный вами код использует другую javascript библиотеку под названием jquery. Вы должны вызвать библиотеку перед тегами <script>.

<div class="div-a">
   <div class="div-b">
      <ul class="list-unstyled">
         <li>This is a foo list</li>                             
      </ul>
   </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
<script type="text/javascript">
    $('.div-a .list-unstyled').html($('.div-a .list-unstyled').html().replace('foo','bar'));
</script>

Здесь я добавил jquery CDN , но лучше всего загрузить jquery и называть его как внешний js файл.