2

指定したノードの後に​​、3番目の子ノードとして新しい子ノードを追加したいと思います。

<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

4 に答える 4

5

insertBeforeコンテナの終わりの前のどこかにノードを追加したい場合に使用します。

parentElement.insertBefore(newNode, currentThirdNode);
于 2012-11-11T09:06:50.453 に答える
4

childNodes、つまりsiblingsとには違いがあることに注意してElementSiblingsください。atextNodeは ですが、では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"));

ElementsではなくchildNodeで作業したい場合は、parent.childrenパーツを次のように変更するだけですparent.childNodes

于 2012-11-11T10:14:24.580 に答える
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>');
于 2012-11-11T09:33:18.450 に答える
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>

これがあなたのために働くことを願っています。

于 2012-11-11T09:33:55.890 に答える