Cara menghapus elemen html di javascript

Apa yang terjadi adalah formulir dikirimkan, sehingga halaman disegarkan (dengan konten aslinya). Anda sedang menangani acara click_ pada tombol kirim

Jika Anda ingin menghapus elemen dan tidak mengirimkan formulir, tangani acara submit pada formulir sebagai gantinya, dan kembalikan false dari penangan Anda

HTML

JavaScript

function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } _

Tetapi Anda sama sekali tidak memerlukan (atau menginginkan) formulir untuk itu, tidak jika tujuan utamanya adalah untuk menghapus dummy div. Alih-alih

HTML

JavaScript

function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } _

Namun, gaya pengaturan event handler itu kuno. Anda tampaknya memiliki naluri yang baik bahwa kode JavaScript Anda ada di file sendiri dan semacamnya. Langkah selanjutnya adalah melangkah lebih jauh dan menghindari penggunaan atribut onXYZ untuk mengaitkan event handler. Sebagai gantinya, dalam JavaScript Anda, Anda dapat menghubungkannya dengan cara yang lebih baru (sekitar tahun 2000).

HTML

JavaScript

function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } function pageInit() { // Hook up the "remove dummy" button var btn = document.getElementById('btnRemoveDummy'); if (btn.addEventListener) { // DOM2 standard btn.addEventListener('click', removeDummy, false); } else if (btn.attachEvent) { // IE (IE9 finally supports the above, though) btn.attachEvent(' title', removeDummy); } else { // Really old or non-standard browser, try DOM0 btn. title = removeDummy; } }

lalu panggil function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } _0 dari tag function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 1 di bagian paling akhir halaman Anda function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 2 (tepat sebelum tag penutup), atau dari dalam peristiwa function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 3 function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 4, meskipun itu terjadi sangat terlambat dalam siklus pemuatan halaman dan biasanya tidak baik untuk mengaitkan

Perhatikan bahwa saya harus melakukan beberapa penanganan untuk menangani perbedaan browser. Anda mungkin menginginkan fungsi untuk mengaitkan acara sehingga Anda tidak perlu mengulang logika itu setiap saat. Atau pertimbangkan untuk menggunakan perpustakaan seperti jQuery, Prototype, YUI, Closure, atau beberapa lainnya untuk memuluskan perbedaan browser tersebut untuk Anda. Sangat penting untuk memahami hal-hal mendasar yang terjadi, baik dalam hal dasar-dasar JavaScript maupun dasar-dasar DOM, tetapi pustaka berurusan dengan banyak ketidakkonsistenan, dan juga menyediakan banyak utilitas praktis — seperti sarana menghubungkan penangan peristiwa yang berhubungan dengan . Sebagian besar dari mereka juga menyediakan cara untuk menyiapkan fungsi (seperti function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 5) untuk dijalankan segera setelah DOM siap untuk dimanipulasi, jauh sebelum function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 3 function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; } 4 diaktifkan

Tulisan ini akan membahas tata cara penambahan atau penghapusan elemen HTML melalui JavaScript. Kami juga akan mendemonstrasikan penggunaan metode appendChild() dan insertBefore() untuk menambahkan elemen HTML. Selain itu, contoh yang terkait dengan metode remove() dan removeChild() untuk menghapus elemen HTML akan diberikan kepada Anda. Jadi ayo mulai

Cara menambahkan Elemen HTML melalui JavaScript menggunakan metode appendChild()

Metode JavaScript appendChild() digunakan untuk menambahkan elemen HTML sebagai anak dari simpul induk yang ditentukan. Metode ini digunakan untuk memindahkan elemen HTML

Sintaks metode appendChild()

parentNode. appendChild( childNode );

Di sini, parentNode adalah elemen HTML yang ingin kita deklarasikan sebagai parent, sedangkan childNode adalah elemen HTML yang baru dibuat yang akan ditambahkan ke parent node

Contoh. Cara menambahkan Elemen HTML melalui JavaScript menggunakan metode appendChild()

In this example, we will show you how to use the “appendChild()” method for adding the HTML elements through JavaScript. First of all, we will add a heading and a paragraph using the

and

HTML elements:

< html >

< tubuh >

< h2 > Ini linuxhint. com < /h2 >

< p > Menambahkan Elemen HTML melalui JavaScript. < /p >

< div id="div1"

< p id="p1">This is the main paragraph.< /p >

< p id="p2">This is second paragraph.< /p >

< /div >

In the next step, we will create a new

element “paragraph” by utilizing the “createElement()” method of the document object:

const paragraf = dokumen. buatElemen("p");

At this point, we have only created a

; however, we have not added any text node to it. To do so, we have to create a text node:

const simpul = . createTextNode("Ini adalah node baru. ");

Kemudian, kami akan menambahkan simpul teks "simpul" yang dibuat ke elemen "paragraf" kami, dan kami akan menemukan elemen yang ada

paragraf. appendChild( simpul );

const elemen = dokumen. getElementById("div1");

Terakhir, kami akan menambahkan elemen "paragraf" ke "elemen" HTML yang ada

elemen. appendChild( paragraf );

script>

body>

html>

Jalankan program yang diberikan di atas dalam editor kode favorit Anda atau kotak pasir pengkodean online apa pun;

Seperti yang Anda lihat dari output yang diberikan di bawah ini, elemen HTML baru ditambahkan dengan konten teks "Ini adalah node baru"

Cara menambahkan Elemen HTML melalui JavaScript menggunakan metode insertBefore()

Jika Anda ingin menyisipkan elemen HTML sebagai simpul anak sebelum simpul yang ditentukan, Anda dapat memanggil metode JavaScript “insertBefore()”

Sintaks metode insertMethod()

parentNode. insertBefore( Node baru, Node yang ada );

Di sini, "newNode" adalah elemen HTML yang baru dibuat yang ingin Anda tambahkan, "node yang ada" adalah elemen sebelum Anda akan memasukkan elemen HTML Anda, dan "parentNode" adalah elemen HTML yang telah Anda tentukan sebagai simpul induk

Contoh. Cara menambahkan Elemen HTML melalui JavaScript menggunakan metode insertBefore()

Pada contoh sebelumnya, kita telah menggunakan metode appendChild() untuk menambahkan elemen HTML baru sebagai anak terakhir dari HTML induk. Namun, Anda juga dapat menggunakan metode JavaScript “insertBefore()” untuk menambahkan elemen HTML sebelum elemen yang ditentukan. Contoh yang diberikan di bawah ini akan mengajari Anda penggunaan metode “insertBefore()”.

Pertama, kita akan menambahkan judul dan beberapa paragraf sebagai berikut

< html >

< tubuh >

< h2 > Ini linuxhint. com < /h2 >

< p > Menambahkan Elemen HTML melalui JavaScript. < /p >

< div id="div1"

< p id="p1">This is the main paragraph.< /p >

< p id="p2">This is second paragraph.< /p >

< /div >

Selanjutnya, kita akan membuat elemen HTML "paragraf" elemen baru, dan kemudian menentukan simpul teks anak untuknya

const paragraf = dokumen. buatElemen("p");

const simpul = . createTextNode("Ini adalah node baru. ");

paragraf. appendChild( simpul );

const elemen = dokumen. getElementById("div1");

Sekarang, kita akan menetapkan "p1" sebagai elemen turunan, sehingga kita dapat menyisipkan elemen "paragraf" yang dibuat sebelumnya

const anak = . getElementById("p1");

Terakhir, kita akan melewatkan elemen HTML “paragraph” dan elemen “child” ke metode insertBefore()

elemen. masukkanSebelum( paragraf,anak );

script>

body>

html>

Eksekusi program yang diberikan di atas akan menambahkan HTML "paragraf" sebelum "p1"

Cara menghapus Elemen HTML melalui JavaScript menggunakan metode remove()

Metode JavaScript “remove()” digunakan untuk menghapus elemen HTML yang ditentukan dari Document Object Model (DOM)

Sintaks metode hapus()

simpul. hapus()

Di sini, "simpul" mewakili elemen HTML yang ingin Anda hapus melalui JavaScript

Contoh. Cara menghapus Elemen HTML melalui JavaScript menggunakan metode remove()

In the below-given, we have add a heading HTML element, a paragraph

and a