Dapatkah Anda menambahkan div dalam javascript?

Saat Anda memanggil metode appendChild() , metode ini akan menambahkan elemen yang baru dibuat setelah anak terakhir dari elemen di dalam elemen induk

Yang mirip dengan metode append()

Tetapi ada beberapa perbedaan utama antara metode append() dan appendChild()

const boxWrapper = document.getElementById("box-wrapper");

const box = document.createElement("div");
box.innerHTML = 'div <br> 5';
box.style.backgroundColor = "orange";
box.classList.add("box");

boxWrapper.appendChild(box);

Cobalah

Lihat Pen appendChild() JavaScript #1 oleh SoftAuthor (@softauthor) di CodePen

2. Tambahkan Beberapa Elemen Anak Sebagai Saudara

Berbeda dengan metode append(), appendChild() hanya memungkinkan Anda menambahkan satu elemen dalam satu kueri

Jika Anda ingin menambahkan lebih banyak elemen turunan untuk induk yang sama, Anda harus memanggilnya lagi dengan elemen baru sebagai argumen

const boxWrapper = document.getElementById("box-wrapper");

const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.style.backgroundColor = "orange";
box5.classList.add("box");

const box6 = document.createElement("div");
box6.innerHTML = 'div <br> 6';
box6.style.backgroundColor = "orange";
box6.classList.add("box");

boxWrapper.appendChild(box5);
boxWrapper.appendChild(box6);

3. Tambahkan Elemen Anak Bersarang Satu Di Dalam Yang Lain

Menggunakan appendChild(), kita dapat dengan mudah menambahkan satu elemen di dalam elemen lain dengan merantai metode appendChild()

Berbeda dengan metode append(), metode appendChild() mengembalikan elemen yang ditambahkan

Seperti yang Anda lihat, saya telah memanggil metode appendChild() pada objek boxWrapper

Argumennya adalah Objek. assign() yang merupakan salah satu cara termudah untuk membuat rantai appendChild() untuk menambahkan elemen turunan bersarang

Dibutuhkan dua argumen

1. Elemen yang ingin Anda buat, seperti div atau tombol
2. Objek JavaScript tempat Anda akan menambahkan satu atau beberapa properti untuk elemen tersebut

boxWrapper.appendChild(
  Object.assign(
    document.createElement('div'),
    { classList : 'box',
      innerHTML: "div <br>5"
    }
  )
).appendChild(
  Object.assign(
    document.createElement("button"), {
      innerHTML: "Button"
    }
  )
)

Di sini, saya pertama kali menambahkan elemen div yaitu kotak 5

Kemudian, saya telah merantai metode appendChild() untuk menambahkan elemen anak di dalam elemen kotak 5 yang merupakan tombol

Dalam metode ini, pertama-tama kita memilih div dengan menggunakan salah satu pemilih i. e. getElementById, getElementByTag, querySelector, dll. Kami kemudian menambahkan data ke atribut innerHTML dari div. Metode ini memiliki satu kelemahan. itu menghapus semua pendengar acara yang ada pada div yang dipilih. Itu juga akan menghancurkan semua node yang ada di dalamnya dan menggantinya dengan yang baru. Semua referensi ke elemen akan hilang

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _1 untuk Menambahkan Data ke Div di JavaScript

Seperti metode sebelumnya, pertama kita pilih div dengan menggunakan salah satu pemilih. Tapi alih-alih innerHTML, kami menggunakan

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _5 untuk Menambahkan Data ke Div di JavaScript

Seperti metode kedua, metode ini merupakan alternatif yang lebih baik dari metode pertama.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

Gunakan var targetDiv = document.getElementById('ID'); targetDiv.insertAdjacentHTML('afterend', 'data that you want to add'); _0 jQuery untuk Menambahkan Data ke Div

Fungsi append mengambil input dari konten yang perlu ditambahkan dan dapat dipanggil langsung pada tag menggunakan sintaks jQuery. Metode ini juga memiliki semua kelemahan metode innerHTML

Bagaimana cara menambahkan elemen ke div di JavaScript?

Bagaimana cara menambahkan teks ke div?

Bagaimana cara menambahkan div secara dinamis dalam JavaScript?

Bagaimana cara menambahkan div ke div?