web-dev-qa-db-ja.com

通常のJavaScriptでプリペンドとアペンドを実装するにはどうすればよいですか？

JQueryを使用せずに通常のJavaScriptで prepend および append を実装するにはどうすればよいですか？

javascriptappendprepend
142
Yosef

おそらく DOMメソッドappendChildおよびinsertBeforeについて尋ねているのでしょう。

parentNode.insertBefore(newChild, refChild)

既存の子ノードnewChildの前に、ノードparentNodeをrefChildの子として挿入します。 （newChildを返します。）

refChildがヌルの場合、newChildが子のリストの最後に追加されます。同等に、より読みやすく、parentNode.appendChild(newChild)を使用します。

139
Grumdrig

以下にスニペットを示します。

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildは、theParent内の最初の要素への参照を提供し、theKidの前に置きます。

157
Pat

ここで先に進むことはあまりありませんが、要素の先頭または末尾にコンテンツを追加する方法を尋ねているだけだと思いますか？その場合、次のように簡単に実行できます。

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

とても簡単。

26
Munzilla

どんなに複雑でも生のHTML文字列を挿入したい場合、 insertAdjacentHTML を適切な最初の引数とともに使用できます：

'beforebegin'要素自体の前。 'afterbegin'要素の内側、最初の子の前。 'beforeend'要素の内側、最後の子の後。 'afterend'要素自体の後。

ヒント：いつでもElement.outerHTMLを呼び出して、挿入する要素を表すHTML文字列を取得できます。

使用例：

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

注意：insertAdjacentHTMLは、.addEventLisntenerでアタッチされたリスナーを保持しません。

8
artur grzesiak

生活を簡素化するために、HTMLElementオブジェクトを拡張できます。古いブラウザでは動作しないかもしれませんが、間違いなくあなたの人生を楽にします：

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

次回はこれを行うことができます：

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);
4
moka

私はこれを私のプロジェクトに追加しましたが、うまくいくようです：

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

例：

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);
3
Raza

Prependを使用してドキュメントに段落を追加する例を次に示します。

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

結果：

<p>Example text</p>
2
JamesH

2017年 Edge 15およびIE 12について知っていますが、prependメソッドはDiv要素のプロパティとして含まれていませんが、関数をポリフィルするクイックリファレンスが必要な場合はこれを作りました：

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

最新のほとんどのブラウザと互換性のあるシンプルな矢印機能。

1
akiespenc
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

ReferenceElementがnullまたは未定義の場合、newElementは子ノードのリストの最後に挿入されます。

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

例はここにあります： Node.insertBefore

0
b3wii

Node.jsを使用している場合は、unshift（）を使用してリストの先頭に追加することもできます

0
Steve Freed