Thao tác DOM trong JavaScript với innerText và innerHTML

Những khung công tác front-end đang thịnh hành ngày nay. Làm việc với DOM ảo, mặc dù hiệu quả hơn nhiều, nhưng có thể tốn rất nhiều chi phí khi tất cả những gì bạn cần làm là chỉnh sửa một vài phần tử trên một trang tĩnh hiện có. May mắn là JavaScript đi kèm với một số phương pháp giúp bạn dễ dàng chỉnh sửa văn bản của phần tử cũng như HTML bên trong phần tử.

Lấy React, Angular, Vue và bất kỳ framework mới nào mà tôi không đề cập đến!

Bắt đầu

Để làm theo ở nhà, tất cả những gì bạn cần là một trình duyệt web và một trang để thao tác.

Để dễ dàng hơn, ta có thể tải lên bất kỳ trang web nào, mở console của trình duyệt và overrides nó bằng trang HTML của riêng ta :

document.getElementsByTagName('body')[0].innerHTML = '<div id="gator">Alligators rule!!</div>';

Sau khi bạn nhấn enter, trang hiện có sẽ được thay thế hoàn toàn bằng một lượng HTML nhỏ và sự thật phổ quát về loài bò sát yêu thích của mọi người.

Chỉnh sửa văn bản

Được rồi, vì vậy trong phần bắt đầu, ta sắp sửa nhảy súng và đã sử dụng innerHTML để thao tác một số phần tử trên trang.

Để backup một chút, hãy bắt đầu bằng cách thay đổi văn bản của một phần tử trên một trang. Để làm như vậy, ta cần chọn phần tử của bạn và sau đó sử dụng innerText để đặt nội dung:

document.getElementById('gator').innerText = 'OF COURSE alligators rule!';

Không nhiều cho nó!

Nếu bạn muốn thêm văn bản vào một chuỗi văn bản hiện có, bạn có thể sử dụng innerText để lấy văn bản hiện tại và sau đó thêm vào đó:

const currentText = document.getElementById('gator').innerText;
const nextText = 'Do alligators rule? ' + currentText;
document.getElementById('gator').innerText = nextText;

Thêm văn bản thậm chí còn dễ dàng hơn, vì ta có thể sử dụng += :

document.getElementById('gator').innerText += ' This definitely true.';

Chỉnh sửa HTML

Điều này là tốt và tốt, nhưng thời điểm ta cố gắng giới thiệu HTML, chẳng hạn như gói chuỗi trong <strong> , mọi thứ trở nên sụp đổ.

Vì innerText hoạt động với nội dung văn bản của một phần tử, những thứ như thẻ HTML cuối cùng sẽ được hiển thị, như thể < và > được mã hóa thành < và > .

Tuy nhiên, không có vấn đề gì lớn, khi ta muốn sử dụng thêm đánh dấu với chuỗi của bạn , tất cả những gì ta cần làm là swap innerText cho innerHTML và thực hiện theo cách của ta :

document.getElementById('gator').innerHTML = '<strong>OF COURSE</strong> alligators rule!';

Và cũng giống như innerHTML ta có thể nắm bắt giá trị để thêm vào trước và sử dụng += để thêm vào đó:

const currentHTML = document.getElementById('gator').innerHTML;
const nextHTML = 'Do alligators rule? ' + currentHTML;
document.getElementById('gator').innerHTML = nextHTML;

document.getElementById('gator').innerHTML += ' This definitely true.';

Đó không phải là tất cả, khi sử dụng innerHTML ta có thể làm được nhiều việc hơn là chỉ chỉnh sửa văn bản của một phần tử. Ta cũng có thể sử dụng nó để thêm đánh dấu bổ sung, như trong trường hợp bảng HTML:

document.getElementById('gator').innerHTML = `
  <table border="1">
    <thead>
      <tr>
        <th>Reptile</th>
        <th>Awesomeness</th>
      </tr>
    </thead>
    <tbody id="tableRows">
      <tr>
        <td>Alligator</td>
        <td>9001</td>
      </tr>
    </tbody>
  </table>
`;

Sau đó, ta có thể sử dụng innerHTML để nối các hàng mới vào bảng một cách nhanh chóng:

document.getElementById('tableRows').innerHTML += `
  <tr>
    <td>Snake</td>
    <td>-1</td>
  </tr>
`;

Kết luận

Chắc chắn, việc sử dụng innerText và innerHTML không đạt đến sức mạnh của một khung công tác front-end tận dụng DOM ảo, nhưng này, nó sẽ hoàn thành công việc.

May mắn là đã qua lâu rồi khi innerHTML là tùy chọn duy nhất có sẵn để chỉnh sửa các phần tử bằng JavaScript. Mặc dù ta đã đi được một chặng đường dài, nhưng bạn nên biết những điều này để không phải ném toàn bộ khuôn khổ vào một vấn đề nhỏ.

Tags:

Các tin liên quan

Cách gói một gói JavaScript Vanilla để sử dụng trong React
2019-12-12
Cách phát triển một trình tải lên tệp tương tác với JavaScript và Canvas
2019-12-12
Cách sử dụng map (), filter () và Reduce () trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Ứng dụng một phần và làm xoăn
2019-12-12
Giới thiệu về Closures và Currying trong JavaScript
2019-12-12
Bắt đầu với các hàm mũi tên ES6 trong JavaScript
2019-12-12
Cách đếm số nguyên âm trong một chuỗi văn bản bằng thuật toán JavaScript
2019-12-12
Cách sử dụng phép gán cấu trúc hủy trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Kết hợp & truyền tải
2019-12-12
Cách sử dụng .every () và .some () để điều khiển mảng JavaScript
2019-12-12