Latest web development tutorials
×

JavaScript kuliah

JavaScript kuliah JavaScript pengantar singkat JavaScript pemakaian JavaScript ekspor JavaScript tatabahasa JavaScript laporan JavaScript catatan JavaScript variabel JavaScript Jenis Data JavaScript benda JavaScript fungsi JavaScript cakupan JavaScript peristiwa JavaScript tali JavaScript operator JavaScript membandingkan JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Jenis Konversi JavaScript Regular Expressions JavaScript kesalahan JavaScript debugging JavaScript angkat variabel JavaScript Modus yang ketat JavaScript Gunakan tidak tepat JavaScript bentuk Authentication JavaScript Reserved Keywords JavaScript JSON JavaScript void JavaScript kode Spesifikasi

JS fungsi

JavaScript definisi fungsi JavaScript Argumen fungsi JavaScript fungsi panggilan JavaScript penutupan

JS HTML DOM

DOM pengantar singkat DOM HTML DOM CSS DOM peristiwa DOM EventListener DOM elemen

JS canggih Tutorial

JavaScript benda JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp benda

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript Kegiatan Jangka waktu JavaScript Cookies

JS gudang

JavaScript gudang JavaScript uji jQuery JavaScript uji Prototype

JS contoh

JavaScript contoh JavaScript contoh objek JavaScript Browser contoh objek JavaScript HTML DOM contoh JavaScript ringkasan

JS Reference manual

JavaScript benda HTML DOM benda

elemen DOM JavaScript HTML

Membuat elemen HTML baru

Membuat elemen HTML baru

Untuk menambahkan elemen baru ke DOM HTML, Anda harus membuat dulu elemen (node ​​elemen), dan kemudian menambahkan elemen ke elemen yang ada.

contoh

<Div id = "Div1">
<P id = "p1"> Ini adalah sebuah paragraf. </ P>
<P id = "p2"> Ini adalah paragraf lain. </ P>
</ Div>

<Script>
var para = document.createElement ( "p");
var simpul = document.createTextNode ( "Ini adalah sebuah paragraf baru.");
para.appendChild (node);

var elemen = document.getElementById ( "Div1");
element.appendChild (para);
</ Script>

Coba »

Contoh analisis:

Kode ini menciptakan baru <p> elemen:

var para=document.createElement("p");

Untuk menambahkan teks ke <p> elemen, Anda harus terlebih dahulu membuat simpul teks. Kode ini menciptakan node teks:

var simpul = document.createTextNode ( "Ini adalah sebuah paragraf baru.");

Maka Anda harus menambahkan node teks ini ke <p> elemen:

para.appendChild (node);

Akhirnya, Anda harus menambahkan elemen baru ini untuk sebuah elemen yang ada.

Kode untuk menemukan elemen yang ada:

var elemen = document.getElementById ( "Div1");

Berikut kode setelah elemen yang ada menambahkan elemen baru:

element.appendChild (para);

Menghapus elemen HTML yang ada

Kode berikut menunjukkan bagaimana menghapus elemen:

contoh

<Div id = "Div1">
<P id = "p1"> Ini adalah sebuah paragraf. </ P>
<P id = "p2"> Ini adalah paragraf lain. </ P>
</ Div>

<Script>
var parent = document.getElementById ( "Div1");
anak var = document.getElementById ( "p1");
parent.removeChild (anak);
</ Script>


Coba »

Contoh analisis

Dokumen HTML yang berisi node anak memiliki dua (dua <p> elemen) dari elemen <div>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Cari id = "Div1" unsur-unsur:

var parent = document.getElementById ( "Div1");

Cari id = "p1" yang <p> elemen:

var child=document.getElementById("p1");

Hapus dari induk elemen sub-unsur:

parent.removeChild(child);

lampu Jika Anda dapat menghapus sebuah elemen tanpa referensi ke elemen induk, itu akan menjadi besar.
Namun sayangnya. elemen DOM yang perlu Anda ketahui untuk dihapus, serta elemen induknya.

Ini adalah solusi umum: menemukan elemen anak yang ingin Anda hapus, dan kemudian menggunakan sifat-sifatnya untuk menemukan parentNode orangtua elemen:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

HTML DOM Tutorial

Dalam HTML DOM bagian dari tutorial JavaScript kami, Anda telah belajar:

  • Bagaimana mengubah isi dari elemen HTML (innerHTML)
  • Bagaimana mengubah gaya elemen HTML (CSS)
  • Bagaimana bereaksi terhadap peristiwa pada DOM HTML
  • Bagaimana cara menambahkan atau menghapus elemen HTML

Jika Anda ingin mempelajari lebih lanjut tentang menggunakan JavaScript untuk mengakses pengetahuan HTML DOM, silahkan kunjungi kami lengkap tutorial HTML DOM .