使用 javascript jquery 在元素之后或之前添加 html

Question

I need to add html immediately after the li or immediately before the href in the following HTML:

<li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar">
  <a href="http://www.mydomain/">Visit</a>
</li>

This is what I need to achieve:

<li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar">
  <i class="fa"></i>
  <a href="http://www.mydomain/">Visit</a>
</li>

I tried this but it makes it part of the a and doesn't work:

jQuery('li.cat-parent a').prepend('<i class="fa"></i>');

Is this possible?

Answer 1

Given the HTML structure you're looking to create you need to append to the a , not the li :

jQuery('li.cat-parent').prepend('<i class="fa"></i>');

Answer 2

prepend() adds the new element inside and at the start of the target element.

before() will add it as a sibling, that is the one you should use here.

Here are some reference links:

https://api.jquery.com/before/

https://api.jquery.com/after/

https://api.jquery.com/prepend/

https://api.jquery.com/append/

Answer 3

You need to modify your selector to the .cat-parent element since that's the one you're adding to. Also make sure the i element has the font awesome class correct to properly show the icon.

jQuery('li.cat-parent').prepend('<i class="fa fa-">test</i>');

Answer 4

There are 6 solutions to solve this question. 2 of them are in vanilla js. Here are 4 of them:

Insert in parent as first element (jQuery)

prependTo()

Insert every element in the set of matched elements to the beginning of the target.

More info: jQuery API Docs - prependTo()

 const setup = () => { /** Insert in parent as first element */ //jquery const $catParent = $('.cat-parent'); $('<i class="fa"></i>').prependTo($catParent); } window.addEventListener('load', setup);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar"> <a href="http://www.mydomain/">Visit</a> </li>

Insert in parent as first element (Vanilla JS)

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

'afterbegin' : Just inside the ´element`, before its first child.

More info: MDN Web Docs - insertAdjacentHTML()

 const setup = () => { /** Insert in parent as first element */ //vanilla js const catParent = document.querySelector('.cat-parent'); catParent.insertAdjacentHTML('afterbegin', '<i class="fa"></i>'); } window.addEventListener('load', setup);

 <li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar"> <a href="http://www.mydomain/">Visit</a> </li>

Insert before link (jQuery)

insertBefore()

Insert every element in the set of matched elements before the target.

More info: jQuery API Docs - insertBefore()

 const setup = () => { /** Insert before link */ //jquery const $catParentLink = $('.cat-parent > a'); $('<i class="fa"></i>').insertBefore($catParentLink); } window.addEventListener('load', setup);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar"> <a href="http://www.mydomain/">Visit</a> </li>

Insert before link (Vanilla JS)

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

'beforebegin' : Before the element itself.

More info: MDN Web Docs - insertAdjacentHTML()

 const setup = () => { /** Insert before link */ //vanilla js const catParentLink = document.querySelector('.cat-parent > a'); catParentLink.insertAdjacentHTML('beforebegin', '<i class="fa"></i>'); } window.addEventListener('load', setup);

 <li class="current-cat cat-parent" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseMenu" href="#childcats" id="parent-sidebar"> <a href="http://www.mydomain/">Visit</a> </li>