web-dev-qa-db-ja.com

DOM要素を最初の子として設定する方法は？

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

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

javascriptjqueryarraysdomelements
184
Popara
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
402
nemisj

2017年版

使用できます

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

MDN から：

InsertAdjacentElement（）メソッドは、呼び出された要素を基準に指定された位置に指定された要素ノードを挿入します。

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

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

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

element.insertAdjacentHTML('afterbegin','htmlText')はinnerHTMLのようにHTML文字列を直接挿入しますが、すべてをオーバーライドすることなく、document.createElementの抑圧的なプロセスをジャンプし、文字列操作プロセスでコンポーネント全体を構築することもできます。

element.insertAdjacentTextは、エレメントにサニタイズ文字列を挿入します。これ以上encode/decode

77
pery mimon

2018年版

parentElement.prepend(newFirstChild);

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

追伸文字列を直接追加できます

parentElement.prepend('This text!');

developer.mozilla.org

使用できます -2019年7月91％

ポリフィル

54
Gibolt

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

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
10
yorg

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

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
6
Joseph Dykstra

誤解していない限り：

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

または

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

説明から、何らかの条件が付加されているように聞こえますが、

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
3
James Wiseman

JQueryで 。prepend 関数を探していると思います。サンプルコード：

$("#E").prepend("<p>Code goes here, yo!</p>");
2
Emil Vikström
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

0
Ilker Cat

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

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
0
Raza