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

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

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

一个
拖
三
四

var li=document.createElement（“li”）；
document.getElementById（“菜单”）.appendChild（li）；
var sometext=document.createTextNode（“第三个”）；
li.appendChild（sometext）；

如果要在其容器末尾之前的任何位置添加节点，请使用

parentElement.insertBefore(newNode, currentThirdNode);

javascript（不带jQuery）：

或者使用jQuery：

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

$（“#菜单”）.children（）.eq（1）.append（“
新建”
”）；

我认为，在添加新元素之前，应该先附加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>

var li=document.createElement（“li”）；
var sometext=document.createTextNode（“第三个”）；
li.appendChild（sometext）；
var menu=document.getElementById（“菜单”）；
var third=parent.getElementsByTagName（“LI”）[2]；
菜单。插入前（李，第三）；

---

我希望这对您有用。

请记住，

childNodes

中存在差异，即

兄弟姐妹

和

元素兄弟姐妹

。

textNode

是

节点

，但不是

元素

。因此，如果要在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"));

然后像这样使用它：

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而不是元素，只需将

parent.children

部分更改为

parent.childNodes

否。答案中似乎没有遗漏任何内容。如果您不理解某些内容，请更具体地说明您不理解的内容。我正在尝试将创建的元素添加为第三个子元素，而不是代码中的最后一个子元素example@FahmyFarahat-你刚才重复了这个问题，这个答案已经回答了。如果您不理解（答案中）某些内容，请更具体地说明您不理解的内容。1）检索第三个

元素：
var third\u li=menu.getElementsByTagName（'li'）[2]2）在当前元素之前插入新元素：
menu.insertBefore（new\u li，third\u li）
这个问题没有标记为
jQuery
，所以我不会在这里发布。为什么使用大写字母？根据我的经验，IE等浏览器不会识别您试图创建的元素，除非您将它们大写。这是错误的。HTML标记名不区分大小写。你有IE 6吗？也许你是对的，但我喜欢在编程时应用/采用良好的实践。我以前在IE的javascript引擎上遇到过问题。这不是一个有趣的体验。我要说的是，XHTML要求标记名使用小写字母，因此每当我编写HTML和XHTML时，我只使用小写字母。您不需要
parent.children.length
测试。只需继续执行
parent.insertBefore（元素，parent.children[2]）
，如果没有足够的子元素，它的行为就像
.appendChild（）
。