Bagaimana Anda membuat elemen dan memberinya id dalam javascript?

Question

Atribut id memainkan peran penting dalam JavaScript, yang berhubungan dengan elemen tertentu yang sesuai dengan fungsi getElementById(). id_ harus unik di halaman HTML karena mereka membantu mendapatkan nilai dan konten elemen HTML nanti

Table of Contents Show

Gunakan setAttribute() Fungsi untuk Menambahkan id ke Elemen di JavaScript
Tambahkan id ke Elemen yang Sudah Ada Sebelumnya Menggunakan JavaScript
Tambahkan id ke Elemen Baru Menggunakan JavaScript
1) Membuat contoh div baru
Menambahkan id ke div
Menambahkan kelas ke div
Menambahkan teks ke div
Menambahkan elemen ke div
2) Membuat item daftar baru (div.innerHTML = '<p>CreateElement example</p>';Code language: HTML, XML (xml)7) contoh
3) Membuat contoh elemen document.body.appendChild(div);Code language: CSS (css)_0
Bagaimana cara membuat elemen baru dengan id di JavaScript?
Bagaimana cara mendapatkan ID elemen dalam JavaScript?
Bagaimana cara membuat elemen dalam JavaScript?
Bagaimana cara membuat elemen dan memberinya kelas dalam JavaScript?

Dengan pentingnya atribut id, tutorial ini mengajarkan cara menambahkan atribut id ke elemen HTML yang sudah ada atau yang baru menggunakan JavaScript

Gunakan setAttribute() Fungsi untuk Menambahkan id ke Elemen di JavaScript

Untuk elemen HTML yang sudah ada dan yang baru, fungsi setAttribute() dan properti

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

2 digunakan. setAttribute()_ mengambil dua parameter

Yang pertama adalah nama atribut, dan yang kedua adalah nilai atribut. Misalnya, parameter pertama adalah id, dan yang kedua dapat berupa string apa pun untuk menambahkan atribut id ke elemen tertentu

Di sisi lain, kita dapat langsung menetapkan nilai atribut id ke properti

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

2. Kami akan menggunakan kode permulaan HTML berikut untuk menambahkan id ke elemen yang sudah ada dan baru

Kode HTML



 
 Add IDs
 
 
 My First Heading
 My first paragraph.

Tambahkan id ke Elemen yang Sudah Ada Sebelumnya Menggunakan JavaScript

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

Keluaran

"firstPracPara"
"newPracPara"

_

Kami menggunakan dua cara dalam kode di atas untuk menambahkan atribut id. Pertama adalah metode setAttribute() dan yang kedua adalah properti

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

2

Pertama, kita mendapatkan elemen yang nilai idnya adalah

"firstPracPara"
"newPracPara"

3, gunakan fungsi setAttribute() untuk menetapkan nilai baru dari atribut id, dan cetak di konsol untuk mengonfirmasi bahwa itu diubah

Sekarang, id diubah dari

"firstPracPara"
"newPracPara"

3 menjadi

"firstPracPara"
"newPracPara"

8. Mari ubah lagi dengan menggunakan properti

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

2

Nilai terakhir dari id adalah

var secondP = document.createElement('p');
secondP.setAttribute('id','secondPara');
console.log(secondP.id);

secondP.id="newPara";
console.log(secondP.id);

1; . Anda dapat melihat output di atas

Tambahkan id ke Elemen Baru Menggunakan JavaScript

var secondP = document.createElement('p');
secondP.setAttribute('id','secondPara');
console.log(secondP.id);

secondP.id="newPara";
console.log(secondP.id);

Keluaran

Di sini, kita membuat elemen baru terlebih dahulu menggunakan fungsi

var secondP = document.createElement('p');
secondP.setAttribute('id','secondPara');
console.log(secondP.id);

secondP.id="newPara";
console.log(secondP.id);

3 dan kemudian menggunakan metode setAttribute() dan properti

var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);

firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);

2 untuk menambahkan id

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggunakan JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

7 untuk membuat elemen HTML baru dan melampirkannya ke pohon DOM

Untuk membuat elemen HTML, Anda menggunakan metode ________14______7

let element = document.createElement(htmlTag);
Code language: JavaScript (javascript)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_7 menerima nama tag HTML dan mengembalikan

let div = document.createElement('div');
Code language: JavaScript (javascript)

0 baru dengan jenis

let div = document.createElement('div');
Code language: JavaScript (javascript)

1

1) Membuat contoh div baru

Misalkan Anda memiliki dokumen HTML berikut

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

Contoh berikut menggunakan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_7 untuk membuat elemen

let div = document.createElement('div');
Code language: JavaScript (javascript)

3 baru

let div = document.createElement('div');
Code language: JavaScript (javascript)

Dan tambahkan cuplikan HTML ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

4

div.innerHTML = '<p>CreateElement example</p>';
Code language: HTML, XML (xml)

Untuk melampirkan

let div = document.createElement('div');
Code language: JavaScript (javascript)

_4 ke dokumen, Anda menggunakan metode

let div = document.createElement('div');
Code language: JavaScript (javascript)

6

document.body.appendChild(div);
Code language: CSS (css)

Gabungkan semuanya

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>
    <script>
        let div = document.createElement('div');
        div.id = 'content';
        div.innerHTML = '<p>CreateElement example</p>';
        document.body.appendChild(div);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

Menambahkan id ke div

Jika Anda ingin menambahkan id ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

_4, Anda menetapkan

let div = document.createElement('div');
Code language: JavaScript (javascript)

8 atribut elemen ke nilai, seperti ini

let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);
Code language: JavaScript (javascript)

Menambahkan kelas ke div

Contoh berikut mengatur kelas CSS dari div baru

let div = document.createElement('div');
Code language: JavaScript (javascript)

9

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);
Code language: JavaScript (javascript)

Menambahkan teks ke div

Untuk menambahkan sepotong teks ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

3, Anda dapat menggunakan properti

div.innerHTML = '<p>CreateElement example</p>';
Code language: HTML, XML (xml)

1 seperti contoh di atas, atau membuat simpul

div.innerHTML = '<p>CreateElement example</p>';



Code language: HTML, XML (xml)

2 baru dan menambahkannya ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

4

// create a new div and set its attributes
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// create a new text node and add it to the div
let text = document.createTextNode('CreateElement example');
div.appendChild(text);

// add div to the document
document.body.appendChild(div);
Code language: JavaScript (javascript)

Menambahkan elemen ke div

Untuk menambahkan elemen ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

4, Anda membuat elemen dan menambahkannya ke

let div = document.createElement('div');
Code language: JavaScript (javascript)

4 menggunakan metode

let div = document.createElement('div');
Code language: JavaScript (javascript)

6

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// create a new heading and add it to the div
let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);

// add div to the document
document.body.appendChild(div);
Code language: JavaScript (javascript)

2) Membuat item daftar baru (div.innerHTML = '<p>CreateElement example</p>';Code language: HTML, XML (xml)7) contoh

Katakanlah Anda memiliki daftar item

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_0

Kode berikut menambahkan dua elemen

div.innerHTML = '<p>CreateElement example</p>';
Code language: HTML, XML (xml)

7 ke

div.innerHTML = '<p>CreateElement example</p>';
Code language: HTML, XML (xml)

9

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_1

Keluaran

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>



Code language: HTML, XML (xml)

_2

3) Membuat contoh elemen document.body.appendChild(div);Code language: CSS (css)_0

Terkadang, Anda mungkin ingin memuat file JavaScript secara dinamis. Untuk melakukannya, Anda dapat menggunakan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_7 untuk membuat elemen

document.body.appendChild(div);
Code language: CSS (css)

0 dan menambahkannya ke dokumen

Contoh berikut mengilustrasikan cara membuat elemen

document.body.appendChild(div);
Code language: CSS (css)

0 baru dan memuat file

document.body.appendChild(div);
Code language: CSS (css)

4 ke dokumen

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_3

Pertama-tama Anda dapat membuat fungsi pembantu baru yang memuat file JavaScript dari URL

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_4

Dan kemudian gunakan fungsi pembantu untuk memuat file

document.body.appendChild(div);
Code language: CSS (css)

4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

_5

Untuk memuat file JavaScript secara asinkron, Anda menyetel atribut

document.body.appendChild(div);
Code language: CSS (css)

6 dari elemen

document.body.appendChild(div);
Code language: CSS (css)

0 ke

document.body.appendChild(div);
Code language: CSS (css)

8

Bagaimana cara membuat elemen baru dengan id di JavaScript?

createElement('div'); . className='tclose'; . v=0; javascript.

Bagaimana cara mendapatkan ID elemen dalam JavaScript?

Untuk mendapatkan elemen berdasarkan id dalam javascript, kita dapat menggunakan fungsi bawaan getElementById() untuk mendapatkan elemen HTML apa pun hanya dengan memberikan tag id mereka. If there is no element with the id with is given then it will return null. As we know that id of an element is unique in HTML.