Bên trongHTML nối thêm

ví dụ

Nối một mục vào danh sách

nút const = tài liệu. createElement("li");
const textnode = tài liệu. createTextNode("Nước");
nút. appendChild(textnode);
tài liệu. getElementById("myList"). appendChild(nút);

Tự mình thử »

Di chuyển một mục từ danh sách này sang danh sách khác

nút const = tài liệu. getElementById("myList2"). lastElementChild;
tài liệu. getElementById("myList1"). appendChild(nút);

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Phương thức appendChild() nối thêm một nút (phần tử) làm nút con cuối cùng của một phần tử

---

cú pháp

yếu tố. appendChild(nút)

hoặc là

Thông số

Tham sốMô tảnútBắt buộc
Nút nối thêm

Giá trị trả về

TypeDescriptionNode Nút nối thêm

---

---

Thêm ví dụ

Để tạo một đoạn văn bản

• Tạo phần tử đoạn văn
• Tạo một nút văn bản
• Nối nút văn bản vào đoạn văn
• Nối đoạn văn vào tài liệu

Tạo một

phần tử và nối nó vào một

yếu tố

const para = tài liệu. createElement("p");
nút const = tài liệu. createTextNode("Đây là đoạn văn. ");

cho. appendChild(nút);
tài liệu. getElementById("myDIV"). appendChild(para);

Tự mình thử »

Tạo một

phần tử và nối nó vào phần thân của tài liệu

const para = tài liệu. createElement("P");
nút const = tài liệu. createTextNode("Đây là đoạn văn. ");

cho. appendChild(nút);
tài liệu. cơ thể người. appendChild(para);

Tự mình thử »

---

hỗ trợ trình duyệt

element.appendChild() là tính năng DOM Cấp 1 (1998)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11

---

Thí dụ

Nhận nội dung HTML của một phần tử với id="myP"

hãy để html = tài liệu. getElementById("myP"). bên trongHTML;

Tự mình thử »

Thay đổi nội dung HTML của một phần tử với id="demo"

tài liệu. getElementById("bản trình diễn"). innerHTML = "Tôi đã thay đổi. “;

Tự mình thử »

Lấy nội dung HTML của một

phần tử có id="myList"

hãy để html = tài liệu. getElementById("myList"). bên trongHTML;

Tự mình thử »

Xóa nội dung HTML của một

phần tử có id="demo"

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Thuộc tính innerHTML đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử

Sự khác biệt giữaInternalHTML, InternalText và TextContent

Xem bên dưới

---

cú pháp

Trả về thuộc tính InternalHTML

Đặt thuộc tính InternalHTML

Giá trị tài sản

Thuộc tínhMô tảStringNội dung HTML

Giá trị trả về

TypeDescriptionString Nội dung HTML của phần tử

---

---

Thêm ví dụ

Thí dụ

Thay đổi nội dung HTML của hai phần tử

hãy để văn bản = "Xin chào Dolly. “;
tài liệu. getElementById("myP"). bên trongHTML = văn bản;
tài liệu. getElementById("myDIV"). bên trongHTML = văn bản;

Tự mình thử »

Thí dụ

Lặp lại nội dung HTML của một phần tử

yếu tố. phần tử bên trongHTML +=. bên trongHTML;

Tự mình thử »

Thí dụ

Thay đổi nội dung HTML và URL của một liên kết

yếu tố. innerHTML = "W3Schools";
yếu tố. href="https. //www. w3schools. com";

Tự mình thử »

---

Sự khác biệt giữaInternalHTML, InternalText và TextContent

Thuộc tính innerHTML trả về
Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và các thẻ HTML bên trong. Thuộc tính InternalText trả về
Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có khoảng cách văn bản và thẻ ẩn CSS, ngoại trừ

Đôi khi, chúng tôi muốn làm điều này mà không cần đặt thuộc tính innerHTML của phần tử vùng chứa để làm như vậy

Trong bài viết này, chúng ta sẽ xem cách nối HTML vào phần tử vùng chứa mà không đặt thuộc tính innerHTML của phần tử vùng chứa bằng JavaScript

sử dụng tài liệu. createElement và appendChild

Một cách để thêm các phần tử con vào phần tử vùng chứa mà không cần đặt thuộc tính innerHTML là sử dụng phương thức document.createElement để tạo phần tử

Sau đó, chúng ta có thể gọi appendChild để nối thêm phần tử

Chẳng hạn, nếu chúng ta có HTML sau

Sau đó chúng ta có thể viết

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

Chúng tôi nhận được div mà chúng tôi đã thêm với querySelector

Sau đó, chúng tôi gọi document.createElement để tạo một div khác mà chúng tôi chèn vào div cha dưới dạng phần tử con

Chúng tôi đặt giá trị của phần tử mới được tạo là

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

1 để thêm một số nội dung vào đó

Và sau đó chúng tôi gọi

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

2 để thêm phần tử con vào div mà chúng tôi đã thêm ban đầu

Bây giờ chúng ta sẽ thấy 'hello world' trên màn hình

Sử dụng phương thức insertAdjacentHTML

Một cách khác để chèn phần tử con vào phần tử vùng chứa dưới dạng phần tử con là sử dụng phương thức

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

3

Nếu chúng ta có HTML sau

Sau đó, chúng ta có thể sử dụng nó bằng cách viết

const element = document.querySelector('div')
element.insertAdjacentHTML('beforeend', '
hello world
');

Chúng tôi nhận được div với querySelector

Sau đó, chúng tôi gọi

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

3 với

const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;while (e.firstChild) {
  element.appendChild(e.firstChild);
}

6 và HTML mà chúng tôi muốn chèn vào div làm đối số

Bây giờ chúng ta sẽ thấy kết quả giống như ví dụ trước

Phần kết luận

Chúng ta có thể nối HTML vào phần tử vùng chứa mà không cần cài đặt InternalHTML bằng JavaScript bằng cách sử dụng các phương thức khác nhau có sẵn trong các đối tượng phần tử DOM

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi

Bạn có thể thêm vào InternalHTML không?

Sự khác biệt giữa append và innerHTML là gì?

Bạn có thể += innerHTML không?

Làm cách nào để thêm HTML vào InternalHTML?