search

Tại sao chúng tôi đang sử dụng InternalHTML?

1 năms trước
Trả lời: 0
Lượt xem: 178

Thuộc tính innerHTML là một phần của Mô hình đối tượng tài liệu (DOM) được sử dụng để đặt hoặc trả về nội dung HTML của một phần tử. Trường hợp giá trị trả về đại diện cho nội dung văn bản của phần tử HTML. Nó cho phép mã JavaScript thao tác một trang web đang được hiển thị. Cụ thể hơn, nó đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử. Thuộc tính innerHTML được sử dụng rộng rãi để sửa đổi nội dung của trang web vì đây là cách dễ dàng nhất để sửa đổi DOM. Nhưng có một số nhược điểm khi sử dụng InternalHTML trong JavaScript

Show

Tóm lược. trong hướng dẫn này, bạn sẽ học cách sử dụng thuộc tính JavaScript 

let content = element.innerHTML;
Code language: JavaScript (javascript)
2 của một phần tử để lấy hoặc đặt đánh dấu HTML có trong phần tử đó

let content = element.innerHTML;
Code language: JavaScript (javascript)
2 là một thuộc tính của 
let content = element.innerHTML;
Code language: JavaScript (javascript)
4 cho phép bạn lấy hoặc đặt đánh dấu HTML có trong phần tử

element.innerHTML = 'new content';
element.innerHTML;
Code language: JavaScript (javascript)

Đọc thuộc tính InternalHTML của một phần tử

Để lấy đánh dấu HTML có trong một phần tử, bạn sử dụng cú pháp sau

let content = element.innerHTML;
Code language: JavaScript (javascript)

Khi bạn đọc 

let content = element.innerHTML;
Code language: JavaScript (javascript)
2 của một phần tử, trình duyệt web phải tuần tự hóa đoạn HTML của phần tử con của phần tử đó

1) Ví dụ JavaScript InternalHTML đơn giản

Giả sử rằng bạn có đánh dấu sau

 <ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>
Code language: HTML, XML (xml)

Ví dụ sau sử dụng thuộc tính 

let content = element.innerHTML;
Code language: JavaScript (javascript)
2 để lấy nội dung của phần tử 
let content = element.innerHTML;
Code language: JavaScript (javascript)
7

let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)

Làm thế nào nó hoạt động

  • Đầu tiên, chọn phần tử 
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    7 theo id của nó (
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    9) bằng cách sử dụng phương thức 
     <ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>
    Code language: HTML, XML (xml)
    0
  • Sau đó, lấy nội dung HTML của phần tử 
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    7 bằng cách sử dụng hàm 
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    2

đầu ra

<li>Home</li>
<li>Services</li>
Code language: HTML, XML (xml)

2) Kiểm tra nguồn HTML hiện tại

Thuộc tính 

let content = element.innerHTML;
Code language: JavaScript (javascript)
2 trả về nguồn HTML hiện tại của tài liệu, bao gồm tất cả các thay đổi đã được thực hiện kể từ khi trang được tải

Xem ví dụ sau

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript innerHTML</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');

        // create new li element
        let li = document.createElement('li');
        li.textContent = 'About Us';
        // add it to the ul element
        menu.appendChild(li);

        console.log(menu.innerHTML);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

đầu ra

<li>Home</li>
<li>Services</li>
<li>About Us</li>
Code language: HTML, XML (xml)

Làm thế nào nó hoạt động

  • Đầu tiên, lấy phần tử 
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    7 có id 
    let content = element.innerHTML;
    Code language: JavaScript (javascript)
    9 bằng phương thức 
     <ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>
    Code language: HTML, XML (xml)
    0
  • Second, create a new 
     <ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>
    Code language: HTML, XML (xml)
    7 element and add it to the