如何将其作为第三个孩子附录

Question

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

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

Answer 1

如果要在容器结束之前在任何地方添加节点，请使用insertBefore。

parentElement.insertBefore(newNode, currentThirdNode);

Answer 2

请记住，childNodes（即siblings和ElementSiblings）存在差异。textNode是Node，而不是Element。因此，如果要将元素插入DOM，请使用nextElementSibling |previousElementSibling和appendChild |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"));

如果您想从事儿童节点（而不是元素），则只需将parent.children零件更改为parent.childNodes

Answer 3

我认为您应该在添加这样的新元素之前附加文本节点：

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

我希望这对您有用..

Answer 4

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>');