Bagaimana cara mengatur elemen DOM sebagai anak pertama?

243

Saya memiliki elemen E dan saya menambahkan beberapa elemen ke dalamnya. Tiba-tiba, saya mengetahui bahwa elemen berikutnya harus menjadi anak pertama dari E. Apa masalahnya, bagaimana cara melakukannya? Metode unshift tidak berfungsi karena E adalah objek, bukan array.

Jauh untuk beralih melalui anak-anak E dan untuk memindahkan kunci mereka ++, tapi saya yakin ada cara yang lebih cantik.

Popara
sumber
1
Kalian cepat! Maaf, saya pikir saya salah paham. elemen e | - child-el_1 | - child-el_2 | - child-el_3 Dan kemudian datang child-el_4 ... yang harus pas sebagai anak pertama. Prepend akan menempatkan anak-el_4 sebelum [b] e [/ b], apakah saya salah dan lelah atau apa?
Popara

Jawaban:

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

eElement.insertBefore(newFirstElement, eElement.firstChild);
nemisj
sumber
3
Anda temanku, baru saja mendapat beruang! Temuan tambahan yang berguna. docs.jquery.com/Manipulation/insertBefore
Popara
79
Untuk info jika tidak ada elemen di induk, anak tetap akan ditambahkan.
Knu
Dalam kasus firstChild adalah text node throws exception. tapi jquery lebih dulu tidak melakukannya.
Sergey Sahakyan
3
@Sergey, bekerja untuk saya dengan simpul teks juga, diuji pada Firefox dan Chromium. Browser apa yang Anda gunakan? Apakah Anda yakin masalahnya tidak di pihak Anda? Apakah Anda mau menyiapkan snippet / jsfiddle yang mereproduksi masalah?
pengguna
list.outerHTML = entry.outerHTML + list.outerHTML; Semoga membantu seseorang.
Deniz Porsuk
106

Versi 2017

Kamu bisa memakai

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

Dari MDN :

Metode insertAdjacentElement () menyisipkan node elemen yang diberikan pada posisi tertentu relatif terhadap elemen yang dipanggil.

position
A DOMString mewakili posisi relatif terhadap elemen; harus salah satu dari string berikut
beforebegin:: Sebelum elemen itu sendiri.
afterbegin: Tepat di dalam elemen, sebelum anak pertamanya.
beforeend: Tepat di dalam elemen, setelah anak terakhirnya.
afterend: Setelah elemen itu sendiri.

element
Elemen yang akan dimasukkan ke dalam pohon.

Juga di keluarga insertAdjacentada metode saudara:

element.insertAdjacentHTML('afterbegin','htmlText')untuk menyuntikkan string html secara langsung, seperti innerHTMLtetapi tanpa mengabaikan semuanya, sehingga Anda dapat melompat dari proses yang menindas document.createElementdan bahkan membangun seluruh komponen dengan proses manipulasi string

element.insertAdjacentTextuntuk menyuntikkan string sanitasi ke dalam elemen. tidak lagiencode/decode

pery mimon
sumber
2
saran bagus tapi mengapa "kembali ke 2017", ini adalah metode standar bahkan pada ie8
Vitaliy Terziev
Terima kasih. dan terima kasih atas wawasan Anda. judul adalah untuk membantu orang membedakan dengan cepat itu adalah jawaban baru
pery mimon
Bagaimana jika elemen = document.importNode (documentfragment, true)?
Martin Meeser
yang mengembalikan elementtypeof document-fragmentyang tidak ada insertAdjacent...(). sampai kami memiliki jawaban yang lebih baik, tebakan terbaik Anda adalah menambahkan fragmentke a div. buat manipulasi dom Anda dan kemudian gunakan Range.selectNodeContents()dan Range.extractContents()untuk mendapatkan kembali sebuah fragmen
pery mimon
di mana 'elemen' adalah elemen yang ingin Anda tambahkan, dan 'elemen' adalah elemen yang ingin Anda tambahkan;)
bokkie
96

Versi 2018

parentElement.prepend(newFirstChild)

Ini adalah JS modern! Ini lebih mudah dibaca daripada opsi sebelumnya. Saat ini tersedia di Chrome, FF, dan Opera.

PS Anda dapat langsung menambahkan string

parentElement.prepend('This text!')

developer.mozilla.org

Dapatkah Saya Menggunakan - 94% Mei 2020

Polyfill

Gibolt
sumber
6
Solusi hebat, terima kasih! Itu membuatku kesal karena mereka memutuskan untuk menambahkan seorang anak pada akhirnya, .appendChild()tetapi menambahkannya pada permulaan .prepend()alih-alih tetap pada kebaktian dan menyebutnya.prependChild()
Marquizzo
1
append()ada juga, bekerja dengan cara yang sama seperti prepend(), tetapi pada akhirnya
Gibolt
1
Saya juga bingung ketika saya melihat pertanyaan-pertanyaan ini bertanya tentang implementasi prependsementara saya menemukan sudah seperti itu. :( Ok, itu tidak ada di masa lalu.
Rick
10

Anda dapat menerapkannya secara langsung di semua elemen html jendela Anda.
Seperti ini :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
yorg
sumber
prependadalah setara vanilla JS, tanpa perlu prototipe. Ini akan menjadi standar dalam ES7, dan Anda harus menggunakan jika mungkin untuk aplikasi Anda
Gibolt
6

Jawaban yang diterima direactored menjadi suatu fungsi:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
Joseph Dykstra
sumber
+1 untuk menggunakan hubungan anak induk. Jawaban yang diterima kurang dari itu. Saya perlu tahu apa eElementartinya masuk akal. Dan untuk itu, saya perlu membaca pertanyaannya. Sebagian besar waktu, saya hanya memeriksa judul dan langsung ke jawabannya, mengabaikan detail pertanyaan.
akinuri
4

Kecuali saya salah paham:

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

Atau

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

Meskipun kedengarannya seperti dari deskripsi Anda bahwa ada beberapa kondisi terlampir, jadi

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
James Wiseman
sumber
+1 untuk versi $! Saya menulis jQuery extended func, jadi saya akan menggunakan versi asli kapan pun saya bisa karena alasan kinerja, tapi ini sempurna!
Taylor Evanson
Na, dia mencari JavaScript, bukan jquery.
vinyll
2

Saya pikir Anda sedang mencari fungsi .prepependent di jQuery. Kode contoh:

$("#E").prepend("<p>Code goes here, yo!</p>");
Emil Vikström
sumber
Kalian cepat! Maaf, saya pikir saya salah paham. elemen e | - child-el_1 | - child-el_2 | - child-el_3 Dan kemudian datang child-el_4 ... yang harus pas sebagai anak pertama. Prepend akan menempatkan anak-el_4 sebelum [b] e [/ b], apakah saya salah dan lelah atau apa?
Popara
0

Saya membuat prototipe ini untuk menambahkan elemen ke elemen induk.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
Raza
sumber
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

Kucing Ilker
sumber