ライブラリを使用せずにJavaScriptで要素を別の要素の後に挿入するにはどうすればよいですか?

2011年01月25日に質問されました。  ·  閲覧回数 569.9k回  ·  ソース

Xah Lee picture
2011年01月25日

JavaScriptにはinsertBefore()がありますが、jQueryや別のライブラリを使用せずに別の要素の

回答

karim79 picture
2011年01月25日
1356
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

ここで、 referenceNodeは、 newNode後に配置するノードです。 referenceNodeがその親要素内の最後の子である場合、 referenceNode.nextSiblingnullなり、 insertBeforeはの末尾に追加することでそのケースを処理するため、問題ありません。リスト。

そう:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

次のスニペットを使用してテストできます。

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);
<div id="foo">Hello</div>
Armando picture
2015年08月21日
126

簡単なJavaScriptは次のようになります。

前に追加:

element.parentNode.insertBefore(newElement, element);

後に追加:

element.parentNode.insertBefore(newElement, element.nextSibling);

しかし、使いやすさのためにそこにいくつかのプロトタイプを投げてください

以下のプロトタイプを作成することにより、新しく作成された要素からこれらの関数を直接呼び出すことができます。

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

.appendBefore(element)プロトタイプ

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(element)プロトタイプ

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

そして、すべての動作を確認するには、次のコードスニペットを実行します

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));
div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}
<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

JSFiddleで実行します

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

利点:

  • ドライヤー:beforeノードを変数に格納して2回使用する必要はありません。 変数の名前を変更すると、変更する頻度が少なくなります。
  • insertBeforeよりも優れたゴルフ(既存のノード変数名が3文字の長さであっても損益分岐点)

欠点:

  • 新しいもの以降のブラウザサポートの低下: https
  • outerHTMLは要素を文字列に変換するため、イベントなどの要素のプロパティは失われます。 insertAdjacentHTMLは要素ではなく文字列からコンテンツを追加するため、これが必要です。
James Long picture
2011年01月25日
38

Googleですばやく検索すると、このスクリプトが明らかになり

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
bit-less picture
2018年04月28日
31

insertBefore()MDNを参照)は素晴らしく、ここのほとんどの回答で参照されていますが。 柔軟性を高め、もう少し明確にするために、次を使用できます。

insertAdjacentElement()MDNを参照)これにより、任意の要素を参照し、移動する要素を目的の場所に正確に挿入できます。

<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p id="refElem">
    <!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
    ... content ...
    <!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->

同様のユースケースについて考慮すべきその他の例: insertAdjacentHTML()およびinsertAdjacentText()

参照:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https:// developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

golopot picture
2016年10月27日
18

メソッドnode.afterdoc )は、別のノードの後に​​ノードを挿入します。

2つのDOMノードnode1node2場合、

node1.after(node2) node2node1後にnode2 node1.after(node2)挿入します。

この方法は古いブラウザでは使用できないため、通常はポリフィルが必要です。

Mister SirCode picture
2019年12月17日
10

2018ソリューション(悪い習慣、2020年に行く)

私はこの質問が古代であることを知っていますが、将来のユーザーのために、これは変更されたプロトタイプです。これは、存在しない.insertAfter関数のマイクロポリフィルにすぎません。このプロトタイプは、新しい関数baseElement.insertAfter(element);をElementプロトタイプに直接追加します。

Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

ポリフィルをライブラリ、要点、またはコード(または参照可能な他の場所)に配置したら、 document.getElementById('foo').insertAfter(document.createElement('bar'));と記述します。


2019ソリューション(醜い、2020年に行く)

プロトタイプは使用しないでください。 商用利用のための安全な機能が必要な場合は、デフォルトの機能を使用してください。

function insertAfter(el, newEl) {
    el.parentNode.insertBefore(newEl, this.nextSibling);
}

// use

const el = document.body || document.querySelector("body");
// the || means "this OR that"

el.insertBefore(document.createElement("div"), el.nextSibling);
// Insert Before

insertAfter(el, document.createElement("div"));
// Insert After 

2020ソリューション

ChildNodeの現在のWeb標準: https ://developer.mozilla.org/en-US/docs/Web/API/ChildNode

その現在の生活水準にあり、安全です。

サポートされていないブラウザの場合は、次のポリフィルを使用してください: https

私が悪い習慣だと言ったとき、誰かがポリフィルがプロトスを使用していると言いました。

2020ソリューションの使用方法:

// Parent Element
const el = document.querySelector(".class");

// Create New Element
const newEl = document.createElement("div");
newEl.id = "foo";

// Insert New Element BEFORE an Element
el.before(newEl);

// Insert New Element AFTER an Element
el.after(newEl);

// Remove an Element
el.remove();

// Even though it’s a created element,
// newEl is still a reference to the HTML,
// so using .remove() on it should work
// if you have already appended it somewhere
newEl.remove();
olvlvl picture
2015年05月28日
5

または、次のことを簡単に行うことができます。

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
Malik Khalil picture
2016年12月04日
5

ステップ1.要素を準備します:

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

ステップ2.後に追加:

elementParent.insertBefore(newElement, element.nextSibling);
Dmytro Dzyubak picture
2015年04月07日
3

insertBefore()メソッドはparentNode.insertBefore()ように使用されます。 したがって、これを模倣してメソッドparentNode.insertAfter()を作成するには、次のコードを記述できます。

JavaScript

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

この記事で述べたように、DOMを拡張することはあなたにとって正しい解決策ではないかもしれないことに注意し

Hovewer、この記事は2010年に書かれたもので、現在は状況が異なる可能性があります。 だからあなた自身で決めなさい。

JavaScript DOM insertAfter()メソッド@ jsfiddle.net