Masukkan html javascript setelah elemen

JavaScript DOM API tidak secara langsung mendukung penyisipan elemen setelah elemen yang ada

Untuk menyisipkan elemen setelah elemen yang ada di pohon DOM, ikuti langkah-langkah berikut

• Pertama, pilih simpul induk dari elemen yang ada
• Kemudian, sisipkan elemen baru sebelum (insertBefore()) saudara berikutnya (nextSibling) dari elemen yang ada

Fungsi pembantu berikut memungkinkan Anda untuk memasukkan elemen setelah elemen yang ada

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
Code language: JavaScript (javascript)

Apakah tutorial ini membantu?

Ya Tidak

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menyisipkan simpul baru setelah simpul yang ada sebagai simpul anak dari simpul induk

Tutorial ini ditulis ketika DOM API tidak mendukung metode after(). Sekarang, Anda dapat menggunakan metode after() untuk menyisipkan node setelah elemen

JavaScript DOM menyediakan metode insertBefore()_ yang memungkinkan Anda menyisipkan simpul baru setelah simpul yang ada sebagai simpul anak

Bagaimana Anda menambahkan elemen di dalam DOM (Document Object Model) Anda?

Sebelum melangkah lebih jauh, Selamat datang kepada Anda semua dalam serangkaian seri Cuplikan Berguna JavaScript, di mana saya berbagi kode pengurutan untuk membuat pengembangan lebih cepat dan efisien. Jika Anda belum memeriksa episode sebelumnya, buka profil dan periksa sekarang ( tekan ikuti juga ) jika tidak, pantau terus sampai akhir 😃

SisipkanSebelum()

Seperti namanya, itu akan digunakan untuk menambahkan elemen sebelum simpul yang ditentukan ke dalam DOM. Sebagai input, dibutuhkan dua argumen di mana satu akan menunjuk node (sebagai elemen HTML) dan yang kedua akan menjadi kode atau elemen HTML (dalam string) yang ingin Anda tambahkan ke DOM. Mari kita periksa sintaks cuplikan

 const insertBefore() = (element, htmlString) => 
 element.insertAdjacentHTML("beforebegin", htmlString)

Apa itu insertAdjacentHTML? . Fungsi ini membutuhkan dua parameter, yang pertama adalah posisi - dalam hal ini, masing-masing dapat berupa "beforebegin" atau "afterbegin" itu akan menambahkan elemen sebelum node yang diberikan atau di dalam node yang diberikan tetapi sebelum deklarasi anak pertama

Dalam fungsinya, saya telah mengambil elemen dan htmlString sebagai argumen. Sebagai imbalannya, metode elemen pemicu fungsi disebut insertAdjacementHTML dengan posisi dan string HTML

Gunakan Kasus insertBefore()

insertBefore( document.getElementById("pointing-element", "<p> hello world </p>")

Di sini, di argumen pertama, saya telah melewati node yang telah dipilih dari dokumen oleh pemilih id yang disebut getElementById (yang akan menemukan dan mengembalikan elemen dengan id yang diberikan), dan di argumen kedua, saya telah melewati string HTML

SisipkanSetelah()

Fungsi ini dapat digunakan untuk memasukkan elemen HTML setelah node tertentu ke dalam DOM. dan sebagai parameter dibutuhkan dua argumen, satu akan menunjuk node dan yang kedua akan menjadi string konten HTML. Mari kita lihat kode snippet

const insertAfter() = (element, htmlString) => element.insertAdjacentHTML("afterend", htmlString)

Seperti yang Anda lihat, kedua cuplikan kode terlihat hampir sama. Argumen posisi saja dari insertAdjacentHTML berbeda. Dalam kasus insertAfter, Anda dapat menggunakan posisi seperti "afterend" dari "beforeend" yang masing-masing akan ditambahkan setelah node berakhir atau tepat sebelum node berakhir (berarti setelah anak terakhir dari sebuah node)

Kasus Penggunaan InsertAfter()

insertAfter( document.getElementById("pointing-element", "<p> hello world </p>")

Itu saja guys, saya harap Anda telah belajar sesuatu dari artikel ini. Terima kasih telah menonton / membaca teman-teman, jika Anda menemukan ini informatif dan ingin membuat saya lebih banyak konten seperti ini, tolong dukung saya di Patreon

Nah Guys di episode selanjutnya saya akan membagikan sebuah fungsi untuk mendapatkan index dari semua record yang sesuai dengan kondisi di dalam array. jadi ikuti / berlangganan untuk mendapatkan notifikasi

Contoh

Sisipkan yang baru

elemen setelah elemen header

const h2 = dokumen. getElementById("myH2");
biarkan html = "

Paragraf baru saya

Definisi dan Penggunaan

Metode insertAdjacentHTML() menyisipkan kode HTML ke posisi tertentu

Posisi hukum

Sintaksis

elemen. insertAdjacentHTML(posisi, html)

simpul. insertAdjacentHTML(posisi, html)

Parameter

Lebih Banyak Contoh

Contoh

Menggunakan "setelah mulai"

biarkan html = " Jangka waktu saya "; . insertAdjacentHTML("afterbegin", html);

Contoh

Menggunakan "sebelum"

h2. insertAdjacentHTML("sebelum dimulai", html);

Dukungan Peramban

element.insertAjacentHTML()_ didukung di semua browser

Bagaimana cara menambahkan HTML setelah elemen JavaScript?

Bagaimana cara menambahkan HTML setelah div menggunakan JavaScript?

Bagaimana cara menambahkan elemen di sebelah elemen dalam JavaScript?

Bagaimana cara menyisipkan kode HTML menggunakan JavaScript?