Cách thêm mã HTML bên trong phần tử với JavaScript

Học cách thêm một phần tử vào bên trong phần tử khác với JavaScript.

JavaScript có thuộc tính innerHTML giúp thêm mã HTML bên trong phần tử hiện có rất trực tiếp.

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

HTML

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

JavaScript

Giờ hãy thêm mã HTML cho slogan ngay sau headline h1.

// Chọn phần tử h1 bên trong article const articleHeadline = document.querySelector('article header') // Thêm nội dung ngay sau phần tử h1 articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

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

Điều gì nếu bạn cần thêm nội dung ngay phía trên headline h1 thay vì dưới nó?

Không vấn đề, bạn gán nội dung mới cho biến articleHeadline trước, rồi thêm nội dung headline sau đó:

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