327

要素Eがあり、それにいくつかの要素を追加しています。突然、次の要素はEの最初の子である必要があることがわかりました。トリックは何ですか、それを行う方法は何ですか？Eは配列ではなくオブジェクトであるため、メソッドunshiftは機能しません。

長い道のりは、トラフEの子を繰り返し、'em key ++を移動することですが、もっときれいな方法があると確信しています。

4

9 に答える 9

607 
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
于 2010-01-05T16:35:09.723 に答える
202

2018バージョン-prepend

parent.prepend(newChild)  // [newChild, child1, child2]

これは現代のJSです！以前のオプションよりも読みやすくなっています。現在、Chrome、FF、Operaでご利用いただけます。

最後に追加するのと同じことはappend、古いものを置き換えることですappendChild

parent.append(newChild)  // [child1, child2, newChild]

高度な使用法

  1. 複数の値を渡すことができます（またはspread演算子を使用します...）。
  2. 文字列値はすべてテキスト要素として追加されます。

例：

parent.prepend(newChild, "foo")   // [newChild, "foo", child1, child2]

const list = ["bar", newChild]
parent.append(...list, "fizz")    // [child1, child2, "bar", newChild, "fizz"]

関連するDOMメソッド

  1. 続きを読む-child.beforeそしてchild.after
  2. 続きを読む-child.replaceWith

Mozillaドキュメント

使ってもいいですか

于 2017-05-08T00:22:22.637 に答える
128

2017年版

使用できます

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

MDNから：

insertAdjacentElement（）メソッドは、呼び出された要素に対して特定の位置に特定の要素ノードを挿入します。

position
要素に対する相対的な位置を表すDOMString。次の文字列のいずれかである必要があります::
beforebegin要素自体の前。
afterbegin：要素のすぐ内側、最初の子の前。
beforeend：要素のすぐ内側、最後の子の後。
afterend：要素自体の後。

element
ツリーに挿入される要素。

また、そのファミリにinsertAdjacentは兄弟メソッドがあります。

element.insertAdjacentHTML('afterbegin','htmlText')html文字列を直接挿入するinnerHTMLために、すべてを上書きすることなくdocument.createElement、文字列操作プロセスの抑圧的なプロセスをジャンプし、コンポーネント全体を構築することもできます

element.insertAdjacentTextサニタイズ文字列を要素に挿入します。もういやencode/decode

于 2017-04-12T16:00:00.410 に答える
12

すべてのウィンドウのhtml要素に直接実装できます。
このような ：

HTMLElement.prototype.appendFirst = function(childNode) {
    if (this.firstChild) {
        this.insertBefore(childNode, this.firstChild);
    }
    else {
        this.appendChild(childNode);
    }
};
于 2015-01-03T04:35:08.607 に答える
7

受け入れられた回答は関数にリファクタリングされました：

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
于 2015-07-16T16:27:45.323 に答える
5

私が誤解していない限り：

$("e").prepend("<yourelem>Text</yourelem>");

または

$("<yourelem>Text</yourelem>").prependTo("e");

あなたの説明から、何らかの条件が付けられているように聞こえますが、

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
于 2010-01-05T16:23:27.000 に答える
2

jQueryで.prepend関数を探していると思います。コード例：

$("#E").prepend("<p>Code goes here, yo!</p>");
于 2010-01-05T16:23:22.730 に答える
0

親要素の前に要素を追加するために、このプロトタイプを作成しました。

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
于 2017-08-20T17:27:31.677 に答える
0 
var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp

于 2017-12-12T23:22:12.690 に答える