Question

有没有简单的方法在下面的结构中添加来自jquery的Li

<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >

  <ol class="top-menu-bar pull-right">
    <li>
        <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
    </li>
    <li>
        <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
    </li>
    <li>
        <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
    </li>
    <li>
        <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
    </li>    
  </ol>

</div>

我想在FAQ

之后添加以下li

 <li>
            <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
          </li>

我在下面尝试了但是在所有li中都是addind

$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66  li").last().html('<li> Menu 5 </li>');

Answer 1

使用 after() 插入元素后

$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66  li").last().after('<li> Menu 5 </li>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">

  <ol class="top-menu-bar pull-right">
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
    </li>
  </ol>

</div>

或者您可以使用 append() 添加内容

$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">

  <ol class="top-menu-bar pull-right">
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
    </li>
    <li>
      <a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
    </li>
  </ol>

</div>

Answer 2

使用JQuery的After()方法：

$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66  li").last().after('<li> Menu 5 </li>');

这是Fiddle。

添加li作为Jquery的最后一个元素

2 个答案: