157

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

4

12 に答える 12

179

これがあなたを動かすためのスニペットです：

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

于 2010-08-02T20:47:01.183 に答える
154

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

parentNode.insertBefore(newChild, refChild)

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

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

于 2010-08-02T20:48:43.063 に答える
32

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

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

とても簡単。

于 2010-08-02T20:58:22.490 に答える
14

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

于 2014-03-16T16:33:13.400 に答える
7

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

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>`);
于 2017-02-07T21:40:27.193 に答える
5

あなたの人生を単純化するために、あなたは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);
于 2013-11-23T12:19:39.920 に答える
3

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

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

結果：

<p>Example text</p>
于 2017-08-20T02:37:53.923 に答える
1

2017年に私はEdge15とIE12について知っていますが、prependメソッドはDiv要素のプロパティとして含まれていませんが、関数をポリフィルするためのクイックリファレンスが必要な場合は、次のようにします。

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

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

于 2017-11-14T17:06:17.913 に答える
0 
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

于 2014-08-07T15:48:36.240 に答える
0

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

于 2019-04-29T02:16:56.587 に答える
0

document.write（）は良い習慣ではありません。Chromeのような一部のブラウザは、それを使用すると警告を表示します。顧客に提供する場合、コードを使用したくない場合は、悪い解決策になる可能性があります。デバッグコンソールの警告を参照してください。

また、サイトの他の機能にjQueryをすでに使用している顧客にコードを提供する場合、jQueryも悪いことになる可能性があります。すでに別のバージョンのjQueryが実行されていると、競合が発生します。

コンテンツをiframeに挿入し、それを純粋なJSで、JQueryを使用せずに、document.write（）を使用せずに行う場合は、解決策があります。

次の手順を使用できます

1.iframeを選択します。

var iframe = document.getElementById("adblock_iframe");

2.フレームに挿入する要素を作成します。たとえば、画像を作成します。

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) {
    img.style.width = "200px";
    img.style.height = "50px";
} else {
    img.style.width = "400px";
    img.style.height = "100px";
}
img.id = "image";

3.画像要素をiframeに挿入します。

iframe.contentWindow.document.body.appendChild(img);
于 2021-07-30T15:28:58.060 に答える
-1

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

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);
于 2016-07-01T12:01:37.563 に答える