Xây dựng trang HTML bằng JavaScript

Tôi có bảo đảm sự hài lòng trong 30 ngày, vì vậy không có rủi ro (và rất nhiều lợi ích. ) khi đăng ký khóa học này và nâng cao kỹ năng nhà phát triển JavaScript của bạn ngay hôm nay

Trong hướng dẫn này, bạn sẽ học cách tạo các phần tử HTML bằng JavaScript

Mục lục

Bạn có thể chuyển đến một phần cụ thể của hướng dẫn JavaScript này bằng mục lục bên dưới

Cách tạo các phần tử HTML bằng JavaScript

Có một vài phương pháp khác nhau có thể được sử dụng để tạo các phần tử HTML mới bằng JavaScript

Cách chính là sử dụng phương pháp

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

Ví dụ, đây là cách chúng ta có thể sử dụng phương pháp

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

const paragraph = document.createElement('p');

Lưu ý rằng mặc dù chúng tôi đã tạo thẻ

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

Thẻ

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

Đầu tiên, hãy thay đổi giá trị của thuộc tính

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

Thứ hai, chúng ta có thể thêm lớp

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

Dưới đây là tóm tắt về mọi thứ chúng tôi đã làm cho đến nay

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

Bây giờ chúng ta đã tạo và tạo kiểu cho phần tử HTML của mình, đã đến lúc thêm phần tử đó vào trang của chúng ta

Cách thêm phần tử HTML mới vào trang bằng JavaScript

Chúng ta có thể thêm phần tử HTML mới tạo vào trang của mình bằng cách gọi phần tử

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

Đối tượng

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

Bạn sẽ nhận thấy rằng một đoạn màu đỏ mới với dòng chữ

paragraph.classList.add('red-font');

Điều quan trọng là phải hiểu vị trí chèn phần tử khi sử dụng phương pháp

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

Khi bạn gọi nó trên

paragraph.classList.add('red-font');

paragraph.classList.add('red-font');

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

Trong phần tiếp theo, chúng ta sẽ tìm hiểu về một phương thức JavaScript khác cung cấp tính linh hoạt hơn cho việc chèn HTML bằng JavaScript

Phương pháp JavaScript paragraph.textContent = "This is the first HTML element that we created using JavaScript!";0

Trước đó trong khóa học này, chúng ta đã thấy phương pháp

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

Phương thức

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

Đối số

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

• 'trước khi bắt đầu'. Trước chính targetElement
• 'sau khi bắt đầu'. Ngay bên trong targetElement, trước đứa con đầu tiên của nó
• 'trước'. Ngay bên trong targetElement, sau đứa con cuối cùng của nó
• 'hậu quả'. Sau chính targetElement

Đối số

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

Hãy xem xét một ví dụ về cách sử dụng phương pháp

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

document.body.appendChild(paragraph);

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

Kỹ thuật này hữu ích để thêm một phần tử HTML riêng lẻ vào một trang, nhưng có thể trở nên cồng kềnh khi thêm nhiều phần tử. Bạn sẽ phải sử dụng các phương thức

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

May mắn thay, có một cách tốt hơn. Trong phần tiếp theo của hướng dẫn này, bạn sẽ học cách thêm các đoạn HTML dài hơn vào một trang bằng JavaScript

Thêm các đoạn HTML dài hơn vào một trang bằng JavaScript

Trước đó trong khóa học này, chúng tôi đã giới thiệu ký tự ``` - thường được gọi là 'backtick' - như một cách để tạo chuỗi JavaScript. Những backticks này cũng là những ứng cử viên tuyệt vời để đưa các đoạn HTML vào trang web của bạn

Để làm điều này, trước tiên chúng ta cần chọn một vùng chứa cho HTML mà chúng ta đang đưa vào trang web. Chúng tôi sẽ đặc biệt sử dụng phần tử

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

const container = document.querySelector('.container');

Tiếp theo, hãy chỉ định mã HTML nào chúng tôi muốn đưa vào trang. Hãy giữ mọi thứ đơn giản và thêm một vài thẻ đoạn văn

<p>This is the first paragraph we're injecting into the page</p>

<p>This is the second paragraph we're injecting into the page</p>

<p>This is the third paragraph we're injecting into the page</p>

Bây giờ là lúc đưa các thẻ

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

const paragraph = document.createElement('p');

paragraph.textContent = "This is the first HTML element that we created using JavaScript!";

paragraph.classList.add('red-font');

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

const header = document.createElement('h1');

header.textContent = "This is Nick's example index.html file";

document.body.insertAdjacentElement('afterbegin', header);

Đây là mã

container.innerHTML = `

<p>This is the first paragraph we're injecting into the page</p>

<p>This is the second paragraph we're injecting into the page</p>

<p>This is the third paragraph we're injecting into the page</p>

`

Có một vài điều quan trọng bạn nên hiểu về khối mã này

1. Các thẻ đoạn giữa các dấu gạch ngược chỉ là một chuỗi JavaScript bình thường. Mặc dù nội dung của chuỗi là HTML, nhưng nó không phải là HTML cho đến khi nó thực sự được kết xuất vào DOM khi trang được hiển thị
2. Chuỗi này đã sử dụng backticks - điều này rất quan trọng và sẽ được thảo luận chi tiết hơn bên dưới

Việc sử dụng backticks trong mã này rất quan trọng vì hai lý do

Đầu tiên, các backticks cho phép chúng tôi tạo khoảng cách mã HTML trên nhiều dòng. Mặc dù mã vẫn hoạt động bình thường nếu tất cả nằm trên cùng một dòng, nhưng việc tạo khoảng cách giữa HTML trên nhiều dòng (giống như cách mã xuất hiện trong DOM) sẽ giúp mã dễ đọc hơn nhiều

Thứ hai, việc sử dụng backticks cho phép chúng ta nội suy các biến bên ngoài vào HTML, tạo ra nhiều khả năng hấp dẫn

Đây là một ví dụ thô sơ có cùng chức năng như khối mã trước đây của chúng tôi nhưng chứng tỏ tính hữu dụng của phép nội suy chuỗi với HTML

Làm cách nào để tạo một trang HTML bằng JavaScript?

Bạn có thể tạo HTML bằng JavaScript không?

Làm cách nào để tạo trang HTML động bằng JavaScript?

Bạn có thể xây dựng một trang web chỉ bằng JavaScript không?