Cara menggunakan PREPENDING pada JavaScript

Question

Hallo sobat program, bertemu kembali dengan saya Rizal. Alhamdulilah masih diberikan nikmat dan kesehatan untuk dapat sharing kembali seputar pemrograman website dan masih diwebsite Dumet School.

Pada pembahasan kali ini, kita akan membahas tentang fungsi Prepend yaitu Cara Penggunaan Fungsi Prepend pada jQuery. Jika teman-teman sudah membaca artikel saya tentang append maka di artikel kali ini ada kebalikan dari fungsi append yaitu prepend.

Sebelum kita mencobanya teman-teman harus mengetahui apa yang dimaksud dengan fungsi prepend. Fungsi prepend merupakan fungsi untuk menambahkan atau menyisipkan sebuah elemen baru dibagian awal. Setelah kita mengetahuinya kita akan coba bagaimana untuk menggunakannya.

Oke langkah pertama jalankan/run text-editornya kemudian ketiklah kode HTML seperti pada contoh dibawah ini :

Jika sudah, kita tambahkan sedikit style biar terlihat lebih berwarna hehe oke teman-teman tambahkan style nya seperti pada contoh dibawah ini :

Oke langkah terakhir untuk menyempurnakan pembahasan kali ini teman-teman tambahkan kode jQuerynya serta library jQuerynya seperti pada contoh dibawah ini :

Oke dari kode diatas maka hasilnya akan terlihat jelas seperti pada gambar dibawah ini :

Bagaimana ? cukup mudah ya tentang Cara Penggunaan Fungsi Prepend pada jQuery. dan silahkan coba teman-teman sekreative mungkin untuk memodifikasi fungsi prepend yang sederhana ini menjadi luar biasa hehe.

Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Penggunaan Fungsi Prepend pada jQuery. semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

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

Mungkin Anda bertanya tentang metode DOMappendChild dan insertBefore.

parentNode.insertBefore(newChild, refChild)

Menyisipkan simpul newChild sebagai anak dari parentNode sebelum simpul anak yang ada refChild. (Pengembalian newChild.)

Jika refChild adalah null, newChild ditambahkan di akhir daftar anak-anak. Secara setara, 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.firstChild akan memberi kita referensi ke elemen pertama dalam theParent dan meletakkan theKid di depannya.

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 menyisipkan 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. 'beforeend' Tepat di dalam elemen, setelah anak terakhir. 'afterend' Setelah elemen itu sendiri.

Petunjuk: Anda selalu dapat memanggil Element.outerHTML untuk mendapatkan string HTML yang mewakili elemen yang akan dimasukkan.

Contoh penggunaan:

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

DEMO

Perhatian: insertAdjacentHTML tidak melindungi pendengar yang terlampir dengan .addEventLisntener.

Untuk menyederhanakan hidup Anda, Anda dapat memperpanjang objek HTMLElement. 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);

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

Berikut ini 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 dimasukkan sebagai properti untuk elemen Div, tetapi jika ada yang membutuhkan referensi cepat untuk mengisi polyfill fungsi I 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 di 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.

Contoh dapat ditemukan di sini: Node.insertBefore

Anda juga dapat menggunakan unshift () untuk menambahkan ke daftar jika Anda menggunakan Node.js

kode javascript