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

Adding li as last element from Jquery

本文关键字：最后一个 元素 li Jquery 添加      更新时间：2023-09-26

是否有简单的方法从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

中都添加了
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66  li").last().html('<li> Menu 5 </li>');

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

使用After()方法:

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

相关文章：