web-dev-qa-db-ja.com

ライブラリを使用せずにJavaScriptで要素を別の要素の後に挿入する方法

JavaScriptにはinsertBefore()がありますが、jQueryや他のライブラリを使用せずに、 要素を 要素の後に挿入する方法を教えてください。

javascriptdominsertappend
609
Xah Lee
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

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

そう：

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

ここで試してください。

1079
karim79

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

前に追加： 

element.parentNode.insertBefore(newElement, element);

後に追加： 

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

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

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

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

.appendBefore（要素）プロトタイプ 

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で実行する

65
Armando

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);
    }
}
34
James Long

insertAdjacentHTML + outerHTML

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

逆さま：

  • DRYer：beforeノードを変数に格納して2回使用する必要はありません。変数の名前を変更した場合は、発生する頻度が少なくなります。
  • insertBeforeより良いゴルフ（既存のノード変数名が3文字の長さであっても壊れます）

欠点：

  • より新しいブラウザサポートの低下： https://caniuse.com/#feat=insert-adjacent
  • outerHTMLは要素を文字列に変換するため、イベントなどの要素のプロパティを失います。 insertAdjacentHTMLは要素ではなく文字列から内容を追加するのでそれが必要です。
30
Ciro Santilli 新疆改造中心996ICU六四事件

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/insertAdjacentElementhttps://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTMLhttps://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

9
bit-less

node1.after(node2)は<node1/><node2/>を生成します、

ここで、node1とnode2はDOMノードです。

.after()は古いブラウザではサポートされていません [1] したがって、ポリフィルを適用する必要があるかもしれません。

9
golopot

それとも、単にすることができます：

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
4
olvlvl

ステップ1：要素を準備する： 

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

ステップ2.の後に追加してください： 

elementParent.insertBefore(newElement, element.nextSibling);
4
Malik Khalil

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を拡張することはあなたにとって正しい解決策ではないかもしれないことに注意してください。

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

JavaScript DOMのinsertAfter（）メソッド@ jsfiddle.net

2
Dmytro Dzyubak

理想的にはinsertAfterは insertBefore のように動作するはずです。以下のコードは以下を実行します。

  • 子がいない場合は、新しいNodeが追加されます
  • 参照Nodeがない場合は、新しいNodeが追加されます。
  • 参照Nodeの後にNodeがない場合は、新しいNodeが追加されます。
  • 参照Nodeの後に兄弟がある場合は、その兄弟の前に新しいNodeが挿入されます
  • 新しいNodeを返します

拡張Node

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

一般的な例

node.parentNode.insertAfter(newNode, node);

実行中のコードを参照

// First extend
Node.prototype.insertAfter = function(node, referenceNode) {
    
    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

var referenceNode,
    newNode;

newNode = document.createElement('li')
newNode.innerText = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);
<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>
1
Darlesson

このコードは、 インライン化 /小さなCSSファイルへの最後の既存の子の直後にリンク項目を挿入するための作業です。

var raf, cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

//check before insert
try {
    raf=requestAnimationFrame||
        mozRequestAnimationFrame||
        webkitRequestAnimationFrame||
        msRequestAnimationFrame;
}
catch(err){
    raf=false;
}

if (raf)raf(cb); else window.addEventListener('load',cb);
0
Chetabahana

私はこの質問がすでにあまりにも多くの答えを持っていることを知っています、しかしそれらのどれも私の正確な要件を満たしていませんでした。

parentNode.insertBefore - と正反対の動作をする関数が必要でした。つまり、nullのreferenceNodeこれは 受け入れられた答え は受け入れません）を受け入れ、insertBeforeは_（最後）に挿入します。子のうち、これはstartに挿入する必要があります。そうでなければ、この関数で開始位置に挿入する方法はまったくありません。同じ理由でinsertBeforeが最後に挿入されます。

NullのreferenceNodeは親を見つけるためにあなたを必要とするので、親を知る必要があります - insertBeforeはparentNodeのメソッドです、それでそれはそのように親へのアクセスを持っています。私たちの関数はそうではないので、私たちはパラメータとして親を渡す必要があるでしょう。

結果の関数は次のようになります。

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

あるいは（必要であれば、お勧めしません）Nodeプロトタイプを拡張することもできます。

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}
0
mindplay.dk

appendChild関数を使って要素の後に挿入することができます。

参照： http://www.w3schools.com/jsref/met_node_appendchild.asp

0
Doug LN

insertAfterの堅牢な実装.

// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));

;

0
jszhou

すべてのシナリオを処理できます

 function insertAfter(newNode, referenceNode) {
        if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == '#text')
            referenceNode = referenceNode.nextSibling;

        if(!referenceNode)
            document.body.appendChild(newNode);
        else if(!referenceNode.nextSibling)
            document.body.appendChild(newNode);
        else            
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);            
    }
0
Sami
if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}
0
yavuzkavus
 <!DOCTYPE html>
 <html lang="ca">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function createDiv(){
            var newDiv = document.createElement("div");
            var txt = document.createTextNode("I'm the second div");
            newDiv.appendChild(txt);
            var x = document.getElementsByTagName("BODY")[0];
            x.insertBefore(newDiv, third);
        }
    </script>
</head>
<body>
    <div class="first">
        <p>
            I'm the first div
        </p>
    </div>
    <div id="third">
        <p>
            I'm the third div
        </p>
    </div>
    <button type= " button " name= " button " onclick = " createDiv() " >
        Create the second Div
    </button>
</body>
</html>
0
Kunal Awasthi