Javascript menambahkan tag

Question

Pemilih, elemen, larik elemen, string HTML, atau objek jQuery;

Table of Contents Show

Contoh Dasar
Antarmuka ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);_5
html<div id="app"> <p>Hello, World!</p></div>0
html<div id="app"> <p>Hello, World!</p></div>8
Antarmuka tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}_2
tsappendChild<T extends Node>(newChild: T): T;1
Perbedaan antara tsx<div> <p>Hello, World</p> <p>TypeScript!</p></div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]1 dan tsx<div> <p>Hello, World</p> <p>TypeScript!</p></div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]2
Metode ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);_01 dan ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);02
Tertarik untuk mempelajari lebih lanjut?
Bagaimana cara menambahkan tag P di div menggunakan JavaScript?
Bisakah saya menggunakan P di div?
Bagaimana cara menggunakan tag P dalam JavaScript?
Bagaimana cara menambahkan elemen ke div di JavaScript?

Metode .after() dan .insertAfter() melakukan tugas yang sama. Perbedaan utamanya terletak pada sintaks—khususnya, dalam penempatan konten dan target. Dengan .after(), ekspresi pemilih sebelum metode adalah wadah setelah konten disisipkan. Sebaliknya, dengan .insertAfter(), konten mendahului metode, baik sebagai ekspresi pemilih atau sebagai markup yang dibuat dengan cepat, dan disisipkan setelah wadah target

Perhatikan HTML berikut

1

2

3

4

5


<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Kita dapat membuat konten dan menyisipkannya setelah beberapa elemen sekaligus

1


$( "<p>Test</p>" ).insertAfter( ".inner" );

_

Setiap elemen


$( "<p>Test</p>" ).insertAfter( ".inner" );

_0 dalam mendapatkan konten baru ini

1

2

3

4

5

6

7


<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Kami juga dapat memilih elemen pada halaman dan menyisipkannya setelah yang lain

1


$( "h2" ).insertAfter( $( ".container" ) );

_

Jika sebuah elemen yang dipilih dengan cara ini dimasukkan ke satu lokasi di tempat lain di DOM, itu akan dipindahkan setelah target (tidak dikloning) dan set baru yang terdiri dari elemen yang dimasukkan dikembalikan

1

2

3

4

5


<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Namun, jika ada lebih dari satu elemen target, salinan kloning dari elemen yang disisipkan akan dibuat untuk setiap target setelah yang pertama, dan kumpulan baru itu (elemen asli ditambah klon) dikembalikan

Sebelum jQuery 1. 9, kasus append-to-single-element tidak membuat set baru, melainkan mengembalikan set asli yang membuatnya sulit untuk menggunakan metode


$( "<p>Test</p>" ).insertAfter( ".inner" );

1 dengan andal saat digunakan dengan jumlah elemen yang tidak diketahui

Dalam 20+ tahun sejak standarisasinya, JavaScript telah berkembang sangat jauh. Meskipun pada tahun 2020, JavaScript dapat digunakan di server, dalam ilmu data, dan bahkan di perangkat IoT, penting untuk mengingat kasus penggunaannya yang paling populer. browser web

Situs web terdiri dari dokumen HTML dan/atau XML. Dokumen-dokumen ini statis, tidak berubah. Document Object Model (DOM) adalah antarmuka pemrograman yang diterapkan oleh browser untuk membuat situs web statis berfungsi. DOM API dapat digunakan untuk mengubah struktur, gaya, dan konten dokumen. API sangat kuat sehingga kerangka kerja frontend yang tak terhitung jumlahnya (jQuery, React, Angular, dll. ) telah dikembangkan di sekitarnya untuk membuat situs web dinamis lebih mudah untuk dikembangkan

TypeScript adalah superset JavaScript yang diketik, dan mengirim definisi tipe untuk DOM API. Definisi ini sudah tersedia di proyek TypeScript default apa pun. Dari 20.000+ baris definisi di lib. dom. d. ts, satu menonjol di antara yang lain.

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1. Jenis ini adalah tulang punggung untuk manipulasi DOM dengan TypeScript

Anda dapat menjelajahi kode sumber untuk definisi tipe DOM

Contoh Dasar

Diberikan indeks yang disederhanakan. html

html
<!DOCTYPE html>
<html lang="en">
  <head><title>TypeScript Dom Manipulation</title></head>
  <body>
    <div id="app"></div>
    <!-- Assume index.js is the compiled output of index.ts -->
    <script src="index.js"></script>
  </body>
</html>

_

Mari jelajahi skrip TypeScript yang menambahkan elemen

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

3 ke elemen

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

4

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

Setelah mengkompilasi dan menjalankan index. html halaman, HTML yang dihasilkan akan menjadi

html
<div id="app">
  <p>Hello, World!</p>
</div>

Antarmuka ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);_5

Baris pertama kode TypeScript menggunakan variabel global

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

6. Memeriksa variabel menunjukkan bahwa itu ditentukan oleh antarmuka

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

5 dari lib. dom. d. berkas .ts. Cuplikan kode berisi panggilan ke dua metode,

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

8 dan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

9

html<div id="app"> <p>Hello, World!</p></div>0

Definisi untuk metode ini adalah sebagai berikut

ts
getElementById(elementId: string): HTMLElement | null;

Berikan string id elemen dan itu akan mengembalikan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1 atau

html
<div id="app">



  <p>Hello, World!</p>
</div>

2. Metode ini memperkenalkan salah satu jenis yang paling penting,

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1. Ini berfungsi sebagai antarmuka dasar untuk setiap antarmuka elemen lainnya. Misalnya, variabel

html
<div id="app">
  <p>Hello, World!</p>
</div>

_4 dalam contoh kode bertipe

html
<div id="app">
  <p>Hello, World!</p>
</div>

5. Perhatikan juga bahwa metode ini dapat mengembalikan

html
<div id="app">
  <p>Hello, World!</p>
</div>

2. Ini karena metode tidak dapat memastikan waktu proses awal jika metode tersebut benar-benar dapat menemukan elemen yang ditentukan atau tidak. Di baris terakhir cuplikan kode, operator rangkaian opsional baru digunakan untuk memanggil

html
<div id="app">
  <p>Hello, World!</p>
</div>

7

html<div id="app"> <p>Hello, World!</p></div>8

Definisi untuk metode ini adalah (saya telah menghilangkan definisi usang)

ts
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

Ini adalah definisi fungsi yang kelebihan beban. Kelebihan kedua adalah yang paling sederhana dan bekerja sangat mirip dengan metode

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

8. Berikan

ts
getElementById(elementId: string): HTMLElement | null;

0 apa pun dan itu akan mengembalikan HTMLElement standar. Definisi inilah yang memungkinkan pengembang untuk membuat tag elemen HTML yang unik

Misalnya

ts
getElementById(elementId: string): HTMLElement | null;

_1 mengembalikan elemen

ts
getElementById(elementId: string): HTMLElement | null;

2, jelas bukan elemen yang ditentukan oleh spesifikasi HTML

Bagi yang tertarik, Anda dapat berinteraksi dengan elemen tag khusus menggunakan
ts
getElementById(elementId: string): HTMLElement | null;
3

Untuk definisi pertama

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

9, ini menggunakan beberapa pola umum lanjutan. Paling baik dipahami dipecah menjadi potongan-potongan, dimulai dengan ekspresi umum.

ts
getElementById(elementId: string): HTMLElement | null;

_5. Ungkapan ini mendefinisikan parameter umum

ts
getElementById(elementId: string): HTMLElement | null;

_6 yang dibatasi ke kunci antarmuka

ts
getElementById(elementId: string): HTMLElement | null;

7. Antarmuka peta berisi setiap nama tag HTML yang ditentukan dan jenis antarmuka yang sesuai. Misalnya di sini adalah 5 nilai pertama yang dipetakan

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

Beberapa elemen tidak menunjukkan properti unik sehingga mereka hanya mengembalikan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1, tetapi tipe lain memang memiliki properti dan metode unik sehingga mereka mengembalikan antarmuka khusus mereka (yang akan diperluas dari atau mengimplementasikan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1)

Sekarang, untuk sisa definisi

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_9.

ts
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

1. Argumen pertama

ts
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

_2 didefinisikan sebagai parameter generik

ts
getElementById(elementId: string): HTMLElement | null;

6. Interpreter TypeScript cukup pintar untuk menyimpulkan parameter generik dari argumen ini. Ini berarti bahwa pengembang sebenarnya tidak harus menentukan parameter umum saat menggunakan metode; . Itulah tepatnya yang terjadi; . Definisi ini adalah bagaimana variabel

html
<div id="app">
  <p>Hello, World!</p>
</div>

_4 dari cuplikan kode mendapatkan tipe

html
<div id="app">
  <p>Hello, World!</p>
</div>

5. Dan jika kodenya adalah

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

_0, maka itu akan menjadi elemen bertipe

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

1

Antarmuka tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}_2

Fungsi

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

_3 mengembalikan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1.

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element



app?.appendChild(p);

1 antarmuka memperluas antarmuka

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

6 yang memperluas antarmuka

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2. Ekstensi prototipe ini memungkinkan semua

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

8 untuk menggunakan subset dari metode standar. Dalam cuplikan kode, kami menggunakan properti yang ditentukan pada antarmuka

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2 untuk menambahkan elemen

html
<div id="app">
  <p>Hello, World!</p>
</div>

4 baru ke situs web

tsappendChild<T extends Node>(newChild: T): T;1

Baris terakhir potongan kode adalah

ts
appendChild<T extends Node>(newChild: T): T;

2. Sebelumnya,

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

3 , detail bagian yang digunakan operator rangkaian opsional di sini karena ________ 62 _______4 berpotensi menjadi null saat runtime. Metode

html
<div id="app">
  <p>Hello, World!</p>
</div>

_7 didefinisikan oleh

ts
appendChild<T extends Node>(newChild: T): T;

Metode ini bekerja mirip dengan metode

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_9 karena parameter umum

ts
appendChild<T extends Node>(newChild: T): T;

7 disimpulkan dari argumen

ts
appendChild<T extends Node>(newChild: T): T;

8.

ts
appendChild<T extends Node>(newChild: T): T;

7 dibatasi ke antarmuka dasar lain

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2

Perbedaan antara tsx<div> <p>Hello, World</p> <p>TypeScript!</p></div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]1 dan tsx<div> <p>Hello, World</p> <p>TypeScript!</p></div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]2

Sebelumnya, dokumen ini merinci antarmuka

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_1 yang diperluas dari

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

6 yang diperluas dari

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2. Di DOM API ada konsep elemen anak. Misalnya dalam HTML berikut, tag

html
<div id="app">
  <p>Hello, World!</p>
</div>

_4 adalah turunan dari elemen

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

7

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

Setelah menangkap elemen

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

7, prop

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

1 akan mengembalikan daftar

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;



const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

0 yang berisi

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

1. Properti

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

_2 akan mengembalikan daftar node

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

3 yang serupa. Setiap tag

html
<div id="app">
  <p>Hello, World!</p>
</div>

_4 akan tetap bertipe

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

1, tetapi

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

3 dapat berisi node HTML tambahan yang tidak dapat dilakukan oleh daftar

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

0

Ubah html dengan menghapus salah satu dari

html
<div id="app">
  <p>Hello, World!</p>
</div>

4 tag, tetapi pertahankan teksnya

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

Lihat bagaimana kedua daftar berubah.

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

_1 sekarang hanya berisi

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

0 elemen, dan

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

2 berisi

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

2 node daripada dua

html
<div id="app">
  <p>Hello, World!</p>
</div>

4 node. Bagian

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

_2 dari

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

3 adalah

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2 literal yang berisi teks

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

7. Daftar

tsx
<div>
  <p>Hello, World</p>
  <p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

_1 tidak mengandung

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2 ini karena tidak dianggap sebagai

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

1

Metode ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);_01 dan ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);02

Kedua metode ini adalah alat yang hebat untuk mendapatkan daftar elemen dom yang sesuai dengan batasan yang lebih unik. Mereka didefinisikan dalam lib. dom. d. ts sebagai

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

Definisi

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_02 mirip dengan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

04, kecuali mengembalikan tipe baru.

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_05. Jenis pengembalian ini pada dasarnya adalah implementasi khusus dari elemen daftar JavaScript standar. Bisa dibilang, mengganti

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

06 dengan

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

07 akan menghasilkan pengalaman pengguna yang sangat mirip.

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

05 hanya mengimplementasikan properti dan metode berikut.

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

09 ,

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

10,

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

11 , dan pengindeksan numerik. Selain itu, metode ini mengembalikan daftar elemen, bukan simpul, yang

tsx
<div>
  <p>Hello, World</p>
  TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

3 dikembalikan dari metode

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

13. Meskipun ini mungkin tampak sebagai perbedaan, perhatikan bahwa antarmuka

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

6 meluas dari

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
        ...
}

2

Untuk melihat metode ini beraksi, ubah kode yang ada menjadi

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

0

Tertarik untuk mempelajari lebih lanjut?

Bagian terbaik tentang lib. dom. d. Definisi tipe ts adalah bahwa mereka mencerminkan tipe yang dianotasi di situs dokumentasi Mozilla Developer Network (MDN). Misalnya, antarmuka

ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);

_1 didokumentasikan oleh halaman HTMLElement ini di MDN. Halaman-halaman ini mencantumkan semua properti, metode, dan terkadang bahkan contoh yang tersedia. Aspek hebat lainnya dari halaman ini adalah menyediakan tautan ke dokumen standar terkait. Berikut adalah link ke

Bagaimana cara menambahkan tag P di div menggunakan JavaScript?

Kode ini membuat elemen .

const para = dokumen. createElement("p");

node const = dokumen. createTextNode("Ini adalah paragraf baru. ");

para. appendChild(simpul);

elemen const = dokumen. getElementById("div1");

elemen. .

const elmnt = dokumen. getElementById("p1");

elmnt. menghapus();

induk induk = dokumen

Bisakah saya menggunakan P di div?

Dimungkinkan untuk menempatkan elemen HTML apa pun di dalam tag Tag , karena paragraf akan dipecah pada titik di mana tag

Bagaimana cara menggunakan tag P dalam JavaScript?

Saat Anda menggunakan tag Anda memberi tahu juru bahasa bahwa Anda ingin menambahkan paragraf ke halaman. If you removed the script tag from the above code, you would just have an empty body element.

Bagaimana cara menambahkan elemen ke div di JavaScript?

Menggunakan appendChild() , kita dapat dengan mudah menambahkan satu elemen di dalam elemen lain dengan menggabungkan metode appendChild(). Berbeda dengan metode append(), metode appendChild() mengembalikan elemen yang ditambahkan.

kode javascript