Phương thức createElement

Phương thức createElement cho phép tạo một phần tử mới bằng cách truyền vào tham số tên thẻ. Sau khi tạo, có thể làm việc với phần tử như một phần tử thông thường, và cũng có thể thêm nó vào trang bằng các phương thức prepend, append, appendChild, insertBefore hoặc insertAdjacentElement.

Nếu ghi kết quả hoạt động của createElement vào một biến, thì trong biến đó sẽ là một phần tử như thể chúng ta nhận được nó qua querySelector hoặc getElementById. Khác biệt duy nhất - phần tử của chúng ta sẽ không được đặt trên trang. Còn lại chúng ta có thể thay đổi innerHTML của nó, các thuộc tính, gắn các trình xử lý sự kiện và cuối cùng đặt nó trên trang.

Cú pháp

document.createElement('tên thẻ');

Ví dụ

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

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

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>

Ví dụ

Cho một ul. Hãy đặt trong nó 9 thẻ li, đồng thời làm cho văn bản của chúng là số thứ tự:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Ví dụ

Hãy khi chèn các phần tử sẽ gắn vào chúng các trình xử lý sự kiện:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Xem thêm

phương thức cloneNode,
giúp có thể nhân bản phần tử
phương thức createTextNode,
giúp có thể tạo một nút văn bản mới