Tạo và chèn các phần tử bằng JavaScript

Bây giờ chúng ta sẽ học cách tạo mới các phần tử DOM thông qua JavaScript, sau đó thêm chúng vào trang. Phương thức dành cho việc này là createElement. Tham số của phương thức này nên là tên thẻ cần được tạo.

Nếu ghi kết quả thực thi của createElement vào một biến, thì trong biến đó sẽ là phần tử đó, như thể chúng ta nhận được nó thông qua querySelector.

Khác biệt duy nhất - phần tử của chúng ta sẽ không được đặt trên trang. Như vậy chúng ta có thể thay đổi văn bản, thuộc tính của nó, gắn các trình xử lý sự kiện và cuối cùng đặt nó trên trang.

Để đặt phần tử mới lên trang, áp dụng phương thức appendChild. Phương thức này nên được áp dụng cho phần tử mà chúng ta muốn đặt phần tử của mình vào. Và tham số của phương thức nên truyền vào phần tử mới của chúng ta, được tạo trước đó thông qua createElement.

Hãy xem một ví dụ thực tế. Giả sử chúng ta có một div, và trong đó - một vài đoạn văn:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Hãy tạo một đoạn văn, đặt văn bản cho nó và đặt lên trang vào cuối khối #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Kết quả thực thi mã:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Cho trước ol:

<ol id="elem"></ol>

Chèn vào cuối nó một li với văn bản 'item'.

Cho trước ol và một nút bấm:

<ol id="elem"></ol>
<button id="button">click me</button>

Hãy làm sao để khi nhấp vào nút thì cuối danh sách sẽ được thêm một li với văn bản 'item'.