Question

是否可以在具有id

的特定元素之后添加元素

 <ul>
      <li>fred</li> 
      <li>wilma</li>
      <li id ="name">barny</li>
      <li> </li>
      <li> </li>
 </ul>

指定id name

后，在barny之后插入betty

Answer 1

当然，只需通过document.getElementById找到该元素，通过document.createElement创建新元素，然后（这是棘手的一点）通过调用Element#insertBefore parentNode来插入它要在之后插入的那个，指定引用元素的nextSibling作为引用节点。

E.g：

var elm = document.getElementById("name");
var newElm = document.createElement("li");
newElm.innerHTML = "You probably want something here";
elm.parentNode.insertBefore(newElm, elm.nextSibling);

请注意，如果您的引用节点是其父节点中的最后一个节点，这甚至可以工作。在这种情况下，nextSibling将为null，insertBefore知道如何处理该问题。

Answer 2

希望有所帮助

<!DOCTYPE html>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <html>
    <head>
    <script>
    function test()
    {

    $("#name").after("<li id='loremId' name='lorem' >lorem</li>")
    $("#loremId").after("<li id='ipsumId' name='ipsum' >ipsum</li>")
    }
    </script>
    </head>
    <body>
     <ul>
          <li>fred</li> 
          <li>wilma</li>
          <li id ="name">barny</li>
     </ul>



    <script>
    test();
    </script>
    </body>
    </html>

在id之后插入新的li元素

2 个答案: