Apakah append berfungsi di javascript?

Question

Metode JavaScript

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

_0 digunakan untuk menyisipkan simpul baru atau memposisikan ulang simpul yang ada sebagai anak terakhir dari simpul induk tertentu

Table of Contents Show

Sintaks JavaScript appendChild
Apa itu metode JavaScript appendChild()?
JavaScript appendChild(). Contoh
Poin-poin penting yang perlu diperhatikan. metode appendChild()
JavaScript appendChild() vs. menambahkan()
Perbedaan antara appendChild() dan append()
Bagaimana cara menggunakan append di JavaScript?
Apa yang bisa saya gunakan selain menambahkan dalam JavaScript?

Daftar isi

Sintaks JavaScript appendChild
Apa itu metode JavaScript appendChild()?
Poin-poin penting yang perlu diperhatikan. metode appendChild()
JavaScript appendChild(). Contoh
JavaScript appendChild() vs. menambahkan()
Objek yang mendukung appendChild()
Browser yang mendukung appendChild()

Sintaks JavaScript appendChild

parentNode.appendChild(childNode);

_

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

1 adalah simpul yang ingin kita tambahkan ke simpul induk

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

2.

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0 akan mengembalikan anak yang ditambahkan

Apa itu metode JavaScript appendChild()?

JavaScript

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

_0 adalah metode antarmuka Node, digunakan untuk menambahkan node (biasanya elemen) di akhir node induk tertentu. Itu dapat dieksekusi pada node anak yang ada atau dengan membuat elemen baru

Membuat elemen

Untuk membuat elemen baru yang akan disisipkan di akhir simpul induk, pertama-tama gunakan

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

5 untuk membuatnya, lalu

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0 untuk elemen yang baru dibuat

Elemen yang ada

Metode

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0 juga berfungsi pada simpul anak yang ada, yang dengannya Anda dapat memindahkannya ke posisi baru di dalam dokumen. Dalam kasus seperti itu,

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

_0 memindahkan node anak tertentu dari posisinya saat ini ke posisi baru di akhir daftar node anak di bawah node induk yang ditentukan

Untuk menambahkan node anak yang sudah ada ke node lain, perhatikan bahwa tidak perlu menghapus node dari node induknya terlebih dahulu. Hal ini karena node tidak dapat hadir di dua posisi dalam dokumen yang sama secara bersamaan

Jadi, saat Anda menggunakan

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0 untuk menambahkan node anak yang sudah ada ke node lain, node anak dihapus terlebih dahulu, lalu ditambahkan di posisi baru

JavaScript appendChild(). Contoh

1) Contoh sederhana

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

2) Cara menggunakan metode

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

3) Cara memindahkan elemen yang ada di dalam dokumen yang sama menggunakan

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

1

<ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)

Poin-poin penting yang perlu diperhatikan. metode appendChild()

'Ditambahkan' pada dasarnya berarti 'lampirkan di bagian akhir'

Anda dapat menggunakan

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

_2 untuk membuat tiruan dari node sebelum menambahkannya di bawah induk baru. Namun, perlu diingat bahwa salinan node yang dibuat menggunakan

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

3 tidak akan diperbarui secara otomatis

Anda tidak dapat menggunakan metode

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

_0 untuk menambahkan elemen milik dokumen lain. Untuk ini, pertama-tama Anda harus menggunakan

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

5 atau

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

6 untuk mengimpor elemen asing, lalu gunakan

// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);

0 untuk memasukkannya ke posisi yang diinginkan

Anda dapat menggunakan metode

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

_8 untuk menghapus anak dari elemen

JavaScript appendChild() vs. menambahkan()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>

9 adalah API yang lebih baru yang memungkinkan Anda untuk memasukkan sekumpulan objek DOMString (selain objek Node) sebagai node teks yang setara di akhir daftar node anak dari node induk

Sintaks append()

parentNode.append()

Perbedaan antara appendChild() dan append()

1. Node vs. objek DOMString

Tidak seperti

<ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)

_0, yang hanya memungkinkan Anda menambahkan objek Node dan mengembalikan objek Node yang ditambahkan,

<ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)

1 juga memungkinkan Anda menambahkan objek DOMString, dan tidak memiliki nilai balik

2. Lajang vs. Beberapa argumen

Selanjutnya,

<ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)

_2 memungkinkan Anda untuk menambahkan hanya satu node, sedangkan

<ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)

1 mendukung beberapa argumen - sehingga Anda dapat menambahkan beberapa node dan string

Bagaimana cara menggunakan append di JavaScript?

Tambahkan item ke daftar. node const = dokumen. createElement("li"); . createTextNode("Air"); . appendChild(textnode);

Apa yang bisa saya gunakan selain menambahkan dalam JavaScript?

Jika Anda ingin menambahkan elemen dari HTML, gunakan baris. insertAdjacentHTML("sebelum akhir", delButtonHTML); sebagai gantinya. Atau, gunakan elemen yang tepat. const delButton = Objek. menetapkan (dokumen.