web-dev-qa-db-ja.com

Javascript Append Child AFTER要素

Javaスクリプトを使用して、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>
javascriptgetelementbyidappendchildcreateelement
64
Wez

次を使用できます。

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

しかし、Pavelが指摘したように、referenceElementはnull/undefinedである可能性があり、その場合、 insertBefore は appendChild 。したがって、次は上記と同等です。

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

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

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);
15
vitalikaz

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

何かのようなもの：

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

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

更新：ifは_parentGuest.nextSibling_の存在を確認する必要さえありません。次の兄弟はありません。nullを返し、nullをinsertBefore()の2番目の引数に渡すことは、最後に追加することを意味します。

参照：

。

JQueryを使用している場合（それ以外の場合は無視し、上記の単純なJSの回答を述べています）、便利なafter()メソッドを活用できます。

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

参照：

15
Meligy

これで十分です：

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

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

実際、|| nullが必要です。試してみてください。

1
HBP

あなたもできる

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

または

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML('afterend', node2Html);
}
0
nathnolt

afterは現在JavaScriptメソッドです

MDNドキュメント

MDNの引用

ChildNode.after()メソッドは、このDOMStringの直後に、このChildNodeの親の子リストにNodeまたはChildNodeオブジェクトのセットを挿入します_。DOMStringオブジェクトは、同等のテキストノードとして挿入されます。

ブラウザのサポートは、Chrome（54 +）、Firefox（49 +）、Opera（39+）です。 IEおよびEdge。

スニペット

var Elm=document.getElementById('div1');
var Elm1 = document.createElement('p');
var Elm2 = Elm1.cloneNode();
Elm.append(Elm1,Elm2);

//added 2 paragraphs
Elm1.after("This is sample text");
//added a text content
Elm1.after(document.createElement("span"));
//added an element
console.log(Elm.innerHTML);
<div id="div1"></div>

スニペットでは、別の用語を使用しました append too

0
Sagar V