如何将孩子附加为第三个孩子

时间:2012-11-11 09:04:52

标签: javascript html dom

我想在指定节点之后添加一个新的子节点作为第三个子节点。

<ul id="menu">
    <li>one</li>
    <li>tow</li>
    <li>three</li>
    <li>four</li>
</ul>

<script>
var li = document.createElement("li");
document.getElementById("menu").appendChild(li);
var sometext = document.createTextNode("third one");
li.appendChild(sometext); 
</script>

4 个答案:

答案 0 :(得分:4)

如果要在容器结束之前的任何位置添加节点,请使用insertBefore

parentElement.insertBefore(newNode, currentThirdNode);

答案 1 :(得分:3)

请注意childNodessiblingsElementSiblings之间存在差异。 textNodeNode,但不是Element。因此,如果要将元素插入DOM,请使用nextElementSibling | previousElementSiblingappendChild | insertBefore和父级children属性仅包含以下元素:

function insertAsThird( element, parent ){
  if ( parent.children.length > 2 ){
   parent.insertBefore(element, parent.children[2]);
 }
 else parent.appendChild(element);
}

并像这样使用它:

insertAsThird( yourThirdElement, document.getElementById("your target parent"));

如果您想处理childNodes而非Elements,只需将parent.children部分更改为parent.childNodes

答案 2 :(得分:1)

javascript(不带jQuery):

var newLi = document.createElement("li");
newLi.innerHTML ="new el 3"
var menu = document.getElementById("menu");
var el3 = menu.getElementsByTagName("li")[2];
menu.insertBefore(newLi, el3);

或使用jQuery:

$('#menu').children().eq(1).append('<li>new</li>');    

答案 3 :(得分:1)

我认为你应该在添加新元素之前附加textNode:

<script>
  var li = document.createElement("LI");
  var sometext = document.createTextNode("third one");
  li.appendChild(sometext);

  var menu = document.getElementById("menu");
  var third = parent.getElementsByTagName("LI")[2];

  menu.insertBefore(li, third);
</script>

我希望这对你有用..