Добавьте тег <i>внутри тега привязки непосредственно перед тегом <span>, используя jQuery

Question

У меня есть html код:

<div id="outerDiv" class="cls">
  <ul id="ul">
    <li id="li">
      <a id="link1" href="#">
        <span>Click me</span>
      </a>
    </li>
  </ul>
</div>

Как мне в jQuery добавить тег <i> непосредственно перед элементом <span>, чтобы HTML отображался как:

<div id="outerDiv" class="cls">
  <ul id="ul">
    <li id="li">
      <a id="link1" href="#">
        <i class="zmdi zmdi-check"></i>
        <span>Click me</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

Можно использовать jQuery .before():

Вставить содержимое, указанное параметром, перед каждым элементом в наборе согласованных элементов.

Демонстрация:

$(document).ready(function(){
  $('#link1 span').before('<i class="zmdi zmdi-check">Some Text</i>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerDiv" class="cls">
  <ul id="ul">
      <li id="li">
          <a id="link1" href="#">
              <span>Click me</span>
          </a>
      </li>
  </ul>
</div>

Answer 2

Пожалуйста, добавьте jquery -

<script type="text/javascript">
  $( "<i></i>" ).insertBefore( "#link1 span" );
  $('#link1 i').addClass('zmdi zmdi-check');
</script>

Answer 3

.перед кодом сценария добавьте нижнюю часть кода, как показано ниже. это будет работать

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerDiv" class="cls">
  <ul id="ul">
      <li id="li">
          <a id="link1" href="#">
              <span>Click me</span>
          </a>
      </li>
  </ul>
</div>
<script type="text/javascript">
  $('#link1 span').before('<i class="zmdi zmdi-check">Some Text</i>');  
</script>