Cách thêm phần tử đánh dấu bên trong bằng JavaScript

Tìm hiểu cách thêm một phần tử vào bên trong một phần tử khác bằng JavaScript.

JavaScript có một thuộc tính được gọi là innerHTML điều đó làm cho việc thêm đánh dấu bên trong các phần tử hiện có ngay lập tức.

Giả sử bạn có một tiêu đề bài viết với dòng tiêu đề và bạn cần thêm một thông điệp quan trọng ngay bên dưới nó, chẳng hạn như phụ đề hoặc dòng giới thiệu.

HTML

<article>
  <header>
    <h1>Headline for your article</h1>
  </header>
</article>

JavaScript

Bây giờ, hãy thêm một số đánh dấu HTML cho dòng giới thiệu ngay sau dòng tiêu đề h1.

// Select h1 element inside the article element
const articleHeadline = document.querySelector('article header')

// Add content right after the h1 element
articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

Khá tuyệt phải không?

Điều gì sẽ xảy ra nếu bạn cần thêm nội dung ngay trên dòng tiêu đề h1 thay vì bên dưới nó?

Không sao, trước tiên bạn chỉ định nội dung mới cho articleHeadline của mình biến và sau đó thêm nội dung dòng tiêu đề sau đó:

articleHeadline.innerHTML = '<p>Extra content right before the headline.</p>' + articleHeadline.innerHTML