1. ホーム
  2. javascript

Javascriptの子要素のAFTERへの追加

2023-07-24 13:38:44

質問

javascriptを使用して、ul要素内の別のliの後にli要素を追加したいのですが、これは私がこれまでに持っているコードです。

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

appendChildを使いこなしています。

parentGuest.appendChild(childGuest);

しかし、これは新しい要素を他の要素の中に追加し、後ではありません。どうすれば、新しい要素を既存の要素の後に追加することができるのでしょうか?ありがとうございます。

<ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

どのように解決するのですか?

使用することができます。

if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
  parentGuest.parentNode.appendChild(childGuest);
}


しかし、Pavelが指摘するように 参照要素 は null/undefined である可能性があり、その場合は insertBefore と同じように動作します。 子要素の追加 . つまり、以下は上記と同等です。

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);