Bagaimana untuk membuat nod saudara dalam javascript

JavaScript ialah bahasa pengaturcaraan yang biasa digunakan untuk pembangunan bahagian hadapan Ia boleh mencipta, mengubah suai, memadamkan elemen HTML dan operasi DOM yang lain. Dalam dokumen HTML, nod adik beradik merujuk kepada semua nod anak di bawah nod induk yang sama. Kadangkala kita perlu mencipta nod adik beradik baharu melalui JavaScript untuk mencapai kesan dinamik atau fungsi interaktif pada halaman web.

Untuk mencipta nod adik-beradik, anda perlu mengendalikan elemen DOM dalam dokumen HTML melalui JavaScript. DOM (Document Object Model) ialah perwakilan dokumen HTML Ia menukarkan dokumen HTML ke dalam struktur pokok boleh diakses dan dimanipulasi menggunakan JavaScript.

Di bawah, saya akan menunjukkan cara menggunakan JavaScript untuk mencipta nod adik-beradik melalui beberapa kes.

1. Sisipkan elemen baharu sebelum elemen adik beradik

Kita boleh menggunakan kaedah insertBefore() untuk menambah elemen baharu sebelum elemen adik beradik. Berikut ialah kod sampel:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

Dalam contoh ini, mula-mula gunakan kaedah getElementById() untuk mendapatkan nod rujukan (iaitu, elemen untuk mencipta nod adik beradik), dan kemudian gunakan createElement() kaedah untuk mencipta nod elemen div dan menetapkannya Atribut innerHTML ialah "nod baharu". Akhir sekali, gunakan kaedah insertBefore() untuk memasukkan nod baharu ke dalam nod induk nod rujukan dan menjadi nod adik beradik sebelumnya bagi nod rujukan.

2. Masukkan elemen baharu selepas elemen adik beradik

Jika kita perlu menambah nod baharu selepas elemen adik beradik, kita boleh mendapatkan elemen seterusnya unsur adik beradik dahulu sibling nod dan kemudian masukkan nod baharu di hadapannya. Berikut ialah kod sampel:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

Dalam contoh ini, mula-mula gunakan kaedah getElementById() untuk mendapatkan nod rujukan, kemudian buat nod elemen div dan tetapkan atribut innerHTMLnya kepada "nod baharu". Kemudian, gunakan sifat nextSibling untuk mendapatkan nod adik beradik seterusnya bagi nod rujukan Akhir sekali, gunakan kaedah insertBefore() dalam nod induk nod rujukan untuk memasukkan nod baharu di hadapan nod adik beradik seterusnya.

3. Sisipkan elemen baharu di dalam teg

Jika kita ingin menambah nod dalam teg sedia ada, kita boleh menggunakan kaedah appendChild(). Berikut ialah kod sampel:

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

Dalam contoh ini, mula-mula gunakan kaedah getElementById() untuk mendapatkan nod rujukan, kemudian buat nod elemen span dan tetapkan atribut innerHTMLnya kepada "nod baharu". Akhir sekali, gunakan kaedah appendChild() di dalam nod rujukan untuk menambah nod baharu pada label.

Ringkasan

Dalam JavaScript, kami boleh mencipta, mengubah suai, memadamkan elemen HTML dan operasi DOM lain dengan mengendalikan elemen DOM Salah satu operasi yang paling biasa ialah mencipta nod adik-beradik yang baharu. Artikel ini memperkenalkan tiga kaedah untuk mencipta nod adik beradik melalui JavaScript, termasuk memasukkan unsur baharu sebelum unsur adik beradik, memasukkan unsur baharu selepas unsur adik beradik dan memasukkan unsur baharu dalam teg. Kita boleh memilih kaedah yang berbeza untuk mencapai kesan dinamik atau fungsi interaktif pada halaman web mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk membuat nod saudara dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!