Bagaimana saya bisa menerapkan prepend dan tambahkan dengan JavaScript biasa?

Bagaimana saya bisa menerapkan prepend dan tambahkan dengan JavaScript biasa tanpa menggunakan jQuery?

Mungkin Anda bertanya tentang metode DOM appendChild dan insertBefore.

parentNode.insertBefore(newChild, refChild)

Menyisipkan simpul newChildsebagai anak parentNodesebelum simpul anak yang ada refChild. (Pengembalian newChild.)

Jika refChildnol, newChildditambahkan di akhir daftar anak-anak. Sama, dan lebih mudah dibaca, gunakan parentNode.appendChild(newChild).

Berikut cuplikan untuk membuat Anda maju:

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.firstChildakan memberi kita referensi ke elemen pertama di dalam theParentdan meletakkannya theKidsebelumnya.

Anda tidak memberi kami banyak hal untuk dilanjutkan di sini, tapi saya pikir Anda hanya bertanya bagaimana cara menambahkan konten ke awal atau akhir suatu elemen? Jika demikian, inilah cara Anda dapat melakukannya dengan mudah:

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

Sangat mudah.

Jika Anda ingin memasukkan string HTML mentah tidak peduli seberapa kompleksnya, Anda dapat menggunakan insertAdjacentHTML:, dengan argumen pertama yang sesuai:

'beforebegin' Sebelum elemen itu sendiri. 'afterbegin' Tepat di dalam elemen, sebelum anak pertamanya. 'sebelum akhir' Tepat di dalam elemen, setelah anak terakhirnya. 'afterend' Setelah elemen itu sendiri.

Petunjuk: Anda selalu dapat menelepon Element.outerHTMLuntuk mendapatkan string HTML yang mewakili elemen yang akan dimasukkan.

Contoh penggunaan:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

Perhatian: insertAdjacentHTML tidak melindungi pendengar yang terlampir .addEventLisntener.

Saya menambahkan ini pada proyek saya dan sepertinya berhasil:

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]);
    }
};

Contoh:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

Untuk menyederhanakan hidup Anda, Anda dapat memperpanjang HTMLElementobjek. Ini mungkin tidak berfungsi untuk peramban yang lebih lama, tetapi jelas membuat hidup Anda lebih mudah:

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

Jadi lain kali Anda dapat melakukan ini:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

Berikut adalah contoh penggunaan prepend untuk menambahkan paragraf ke dokumen.

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

hasil:

<p>Example text</p>

Pada 2017 saya tahu untuk Edge 15 dan IE 12, metode prepend tidak termasuk sebagai properti untuk elemen Div, tetapi jika ada yang membutuhkan referensi cepat ke polyfill fungsi saya membuat ini:

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

Fungsi panah sederhana yang kompatibel dengan sebagian besar browser modern.

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Jika referenceElement adalah nol, atau tidak terdefinisi, newElement dimasukkan pada akhir daftar node anak.

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.

Contohnya dapat ditemukan di sini: Node.insertBefore

Anda juga dapat menggunakan unshift () untuk menambahkan ke daftar

Ini bukan cara terbaik untuk melakukannya tetapi jika ada yang ingin memasukkan elemen sebelum semuanya, ini caranya.

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