78

javascriptを使用してul要素内に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>
4

6 に答える 6

113

以下を使用できます。

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

しかし、Pavel が指摘したように、referenceElementは null/未定義である可能性があり、その場合、insertBeforeはappendChildと同じように動作します。したがって、以下は上記と同等です。

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
于 2011-08-31T14:16:51.710 に答える
17

要素の次の兄弟の前に、新しい要素を既存の要素の親に追加する必要があります。お気に入り：

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

または、単に追加したい場合は、次のようにします。

var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);
于 2011-08-31T14:12:33.300 に答える
17

単純な JS ソリューションを探している場合は、単にinsertBefore()反対を使用しnextSiblingます。

何かのようなもの：

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

のデフォルト値nextSiblingはnullであるため、特別なことをする必要はありません。

更新:if現在受け入れられている回答のように存在を確認する必要さえありません。parentGuest.nextSibling次の兄弟がない場合は が返され、手段の 2 番目の引数にnull渡されるためです:末尾に追加します。nullinsertBefore()

参照：

.

jQueryを使用している場合（それ以外の場合は無視してください。上記でプレーンなJSの回答を述べました）、便利after()な方法を利用できます：

$("#one").after("<li id='two'>");

参照：

于 2011-08-31T14:18:18.373 に答える
1

これで十分です：

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

(2 番目のパラメーター) が null の場合refnode、通常の appendChild が実行されるためです。ここを参照してください: http://reference.sitepoint.com/javascript/Node/insertBefore

実際に|| nullは が必要だとは思えません。試してみてください。

于 2011-08-31T15:07:14.753 に答える