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

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

おそらく、DOMメソッド appendChildとについて質問しているでしょうinsertBefore。

parentNode.insertBefore(newChild, refChild)

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

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

ここにあなたを始めるためのスニペットがあります：

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ます。

ここで説明することはあまりありませんでしたが、要素の最初または最後にコンテンツを追加する方法を尋ねているだけだと思いますか？もしそうなら、これはあなたがそれをかなり簡単に行うことができる方法です：

//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;

とても簡単。

どんなに複雑であっても生の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>");

デモ

注意： insertAdjacentHTMLが接続されているリスナーは保持されません.addEventLisntener。

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

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>`);

あなたの人生を簡素化するために、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);

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

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

結果：

<p>Example text</p>

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()) } }

ほとんどの最新のブラウザーと互換性のある単純な矢印関数。

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

unshift（）を使用してリストの先頭に追加することもできます

これは最良の方法ではありませんが、誰かがすべての前に要素を挿入したい場合は、ここに方法があります。

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);