Bagaimana cara menghapus html?

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 adaparagraf. appendChild( simpul );const elemen = dokumen. getElementById("div1");Terakhir, kami akan menambahkan elemen "paragraf" ke "elemen" HTML yang adaelemen. 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

<. DOCTYPE html>

< 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

< skrip >

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

skrip>script>

tubuh>body>

html>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

element which comprises two paragraphs and as child nodes:

<. DOCTYPE html>

< 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 menambahkan tombol dan melampirkan event handler “onclick”. Menurut kode berikut, ketika kita akan mengklik tombol "Hapus Elemen", itu akan memanggil metode "myFunction()"

< klik tombol ="myFunction()">Remove Elementbutton>

Dalam metode “myFunction()”, pertama-tama, kami menggunakan metode “document. getElementbyId” untuk menemukan elemen yang ingin kita hapus dengan menentukan “id” nya, kemudian kita akan memanggil metode “remove()”

< skrip >

fungsikan myFunction () {

dokumen. getElementById("p1").hapus();

}

skrip>script>

tubuh>body>

html>html>

Output yang diberikan di bawah ini menandakan bahwa HTML "p1" dihapus dari program JavaScript kami dengan bantuan fungsi "remove()"

Cara menghapus Elemen HTML melalui JavaScript menggunakan metode removeChild()

Dalam JavaScript, "removeChild()" digunakan untuk menghapus simpul HTML anak tertentu dari elemen HTML

Sintaks metode removeChild()

parentNode. removChild( childNode )

Di sini, parentNode adalah elemen HTML yang telah kita tentukan sebagai node "induk", dan ChildNode adalah elemen HTML yang ingin kita hapus dari elemen induk

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

In this example, we will try to remove the child element of our defined

HTML element:

<. DOCTYPE html>

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

Untuk menghapus elemen anak, pertama-tama, Anda harus membuat elemen HTML "induk" dan menentukan elemen HTML yang bertindak sebagai induk dalam kode JavaScript Anda. Dalam kasus kami, kami telah menambahkan "div1"

< skrip >

const induk = . getElementById("div1");

Selanjutnya, kita akan mendefinisikan elemen “anak” dan akan mendapatkan Elemen anak yang ingin kita hapus dari elemen HTML induk

const anak = . getElementById("p1");

Untuk memanggil metode removeChild(), kita akan menggunakan elemen "induk" dan kemudian meneruskan elemen "anak" sebagai argumen ke metode removeChild()

orang tua. removeChild( anak );

skrip>script>

tubuh>body>

html>html>

As you can see that the child element of the HTML element is deleted successfully:

Kesimpulan

Untuk menambahkan elemen HTML dalam program JavaScript Anda, Anda dapat menggunakan metode appendChild() dan insertBefore() , sedangkan untuk menghapus elemen HTML tertentu atau simpul HTML anak, metode remove() dan removeChild() digunakan sesuai dengan keinginan Anda. . Artikel ini membahas cara menambahkan atau menghapus elemen HTML melalui JavaScript. Kami juga telah mendemonstrasikan penggunaan metode appendChild() dan insertBefore() untuk menambahkan elemen HTML. Selain itu, contoh yang terkait dengan metode remove() dan removeChild() untuk menghapus elemen HTML juga disediakan dalam artikel ini

Bagaimana cara menghapus teks HTML?

Dalam artikel ini, kami menghapus teks dari dokumen HTML dengan menggunakan tag . Tag ini adalah singkatan dari delete dan digunakan untuk menandai bagian teks yang telah dihapus dari dokumen.

Bagaimana cara menghapus tag dalam HTML?

Elemen HTML DOM hapus() .

Bagaimana cara menghapus HTML menggunakan JavaScript?

Untuk menghapus elemen HTML yang ada, pertama-tama kita harus memilih elemen yang akan dihapus dari dokumen. Kemudian, gunakan metode seperti remove() dan removeChild() di JavaScript untuk menghapus elemen dari dokumen .

Bagaimana Anda menghapus simpul dalam HTML?

Metode removeChild() menghapus node tertentu. Ketika sebuah node dihapus, semua node anaknya juga dihapus. .

Misalkan buku. .

Tetapkan variabel y menjadi simpul elemen yang akan dihapus

Hapus simpul elemen dengan menggunakan metode removeChild() dari simpul induk

Đọc tiếp