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

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>