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

Question

我需要在下面的html中紧跟在li之后或紧跟在href之前添加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>

这是我需要实现的:

<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>

我试过了，但它使它成为a的一部分，不起作用:

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

这可能吗?

Answer 1

给定您要创建的HTML结构，您需要附加到a，而不是li:

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

Answer 2

prepend()在目标元素的内部和开始处添加新元素。

before()将添加它作为兄弟，这是你应该在这里使用的。

以下是一些参考链接:

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

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

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

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

Answer 3

您需要将选择器修改为.cat-parent元素，因为这是您要添加的元素。还要确保i元素的字体awesome类正确，以正确显示图标。

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

Answer 4

解决这个问题有6种方法。其中2个是香草js。以下是其中的4个:

插入父元素作为第一个元素(jQuery)

prependTo ()

将匹配元素集合中的每个元素插入目标元素的开头。

jQuery API文档- 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>

插入父元素作为第一个元素(香草JS)

insertAdjacentHTML ()方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树的指定位置。

'afterbegin':就在'元素'内部，在它的第一个子元素之前。

更多信息: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>

插入链接(jQuery)

方法()

在目标元素之前插入匹配元素集合中的所有元素。

jQuery API文档- 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>

插入链接前(香草JS)

insertAdjacentHTML ()方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树的指定位置。

'beforebegin':在element之前。

更多信息: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>