使用 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 結構，您需要 append 到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 class 正確以正確顯示圖標。

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>

插入父元素作為第一個元素（Vanilla JS）

Element 接口的insertAdjacentHTML()方法將指定的文本解析為 HTML 或 XML 並將生成的節點插入到指定 position 的 DOM 樹中。

'afterbegin' ：就在 'element' 內部，在它的第一個子元素之前。

更多信息： MDN Web 文檔 - 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>

在鏈接之前插入（Vanilla JS）

Element 接口的insertAdjacentHTML()方法將指定的文本解析為 HTML 或 XML 並將生成的節點插入到指定 position 的 DOM 樹中。

'beforebegin' ：在element本身之前。

更多信息： MDN Web 文檔 - 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>