Cách tạo phần tử trong JavaScript

Một phần tử mới được tạo bắt đầu trống rỗng và không bị ràng buộc. Trước khi nó có thể được hiển thị, nó cần một số nội dung và nó phải được gắn vào một số phần của cây tài liệu

Dưới đây là các bước cơ bản. Tạo và điền vào phần tử

• createElement() — tạo một phần tử mới
• setAttribute() — đặt bất kỳ thuộc tính cần thiết nào, chẳng hạn như ID hoặc lớp
• createTextNode() — tạo bất kỳ nội dung cần thiết nào
• appendChild() — đính kèm nút văn bản mới vào phần tử

Sau đó thêm phần tử vào tài liệu, sử dụng một trong các phương pháp sau

• appendChild()
• chènB Before()
• thay thếChild()

Ngoài ra, các trình duyệt chính cũng triển khai thuộc tính InternalHTML. Tiện ích mở rộng này của Microsoft không phải là một phần của đặc tả DOM, nhưng nó là một cách đơn giản để thiết lập hoặc đọc toàn bộ nội dung của một phần tử. Bạn sẽ thấy cả hai cách tiếp cận được minh họa bên dưới

Trang này sẽ chỉ ra cách tạo hai phần tử mới

• một đoạn văn đơn giản
• một đoạn có chứa một siêu liên kết

tạo một đoạn văn đơn giản

Những gì trình duyệt tạo ra từ đánh dấu này

Đoạn mới của tôi

var newP = document.createElement("p");  // create a new paragraph
newP.setAttribute("id", "viola");  // assign it an ID (optional — for locating later)
newP.setAttribute("class", "example");  // assign it to a class (optional — for style)
var p_text = document.createTextNode("My new paragraph.");  // create some content
newP.appendChild(p_text);  // append the content to "newP"

Nhớ. tất cả các yếu tố đều được cung cấp một bộ công cụ cơ bản hoặc "phương pháp" - không giống như những người thợ mộc, mỗi người đều được trang bị một dây đai dụng cụ cá nhân. Như bạn có thể thấy ở trên, sau khi DOCUMENT đã tạo phần tử P mới, bạn sử dụng các phương thức riêng của P để gán cho nó các tính năng và nối thêm văn bản của nó

Bây giờ, "newP" đã sẵn sàng để đính kèm vào một số phần của tài liệu

gắn nó vào một phần tử

Đặt "newP" ở cuối trang, sau tất cả các phần tử con khác của BODY

document.body.appendChild(newP);

Đặt "newP" ở đầu trang, trước tất cả các phần tử con của BODY

document.body.insertBefore(newP, document.body.firstChild);  // before BODY's firstChild

Đoạn mã trên có thể dễ đọc hơn nếu bạn tạo một biến thay thế cho "tài liệu. cơ thể người". Như thế này

var B = document.body;
B.insertBefore(newP, B.firstChild);

Bạn có thể sử dụng phương pháp tương tự để đính kèm "newP" vào bất kỳ phần tử nào khác mà bạn có thể tìm thấy. Giả sử trang của bạn chứa DIV có ID là "demo"

var D = document.getElementById("demo");  // find "demo"

// any of these commands will add "newP" to "demo's" descendents 
D.appendChild(newP);  // append to "demo"
D.insertBefore(newP, D.firstChild);  // insert as "demo's" 1st child
D.replaceChild(newP, D.firstChild);  // replace "demo's" 1st child
D.insertBefore(newP, D.childNode[1]);  // insert as 2nd child
D.insertBefore(newP, D.lastChild);  // insert as next-to-last child

gắn nó gần một phần tử

Bằng cách sử dụng thuộc tính mối quan hệ của "demo", bạn có thể đính kèm "newP" gần "demo"

D.parentNode.insertBefore(newP, D);  // insert "newP" before "demo"
D.parentNode.insertBefore(newP, D.previousSibling);  // before "demo's" previous sibling
D.parentNode.insertBefore(newP, D.nextSibling);  // insert after "demo"
D.parentNode.insertBefore(newP, D.nextSibling.nextSibling);  //after "demo's" next sibling

Một lần nữa, nếu bạn sẽ thực hiện một số thao tác bằng cách sử dụng nút cha của một phần tử, trước tiên bạn có thể muốn xác định nó dưới dạng một biến riêng biệt

var P = D.parentNode;  // make P refer to D's parent 
P.insertBefore(newP, D);
P.insertBefore(newP, D.nextSibling);

bên tronghtml

Các bước trên sử dụng các công cụ được xác định bởi tiêu chuẩn DOM và chúng mang lại cho bạn rất nhiều tính linh hoạt. Đoạn mới có thể được chèn giữa các phần tử khác hoặc nó có thể thay thế một phần tử bạn chọn

Tuy nhiên, nếu bạn muốn thay thế toàn bộ nội dung của DIV "demo", bạn có thể thực hiện bằng cách sử dụng thuộc tính "innerHTML" không chuẩn

var D = document.getElementById("demo");  // locate "demo"
// replace all its contents with the new paragraph
D.innerHTML = "
My new paragraph.
";

Mặc dù InternalHTML nhỏ gọn và dễ đọc nhưng các phương thức DOM cung cấp cho bạn quyền kiểm soát có chọn lọc hơn. Và vì chúng là một phần của tiêu chuẩn mở nên nhiều khả năng chúng sẽ được triển khai tương tự trên các trình duyệt

Mặt khác, innerhtml được triển khai trong Mozilla, Opera và Safari, cũng như Internet Explorer. Và Internet Explorer 6 không tuân theo DOM một cách chính xác trong mọi trường hợp, vì vậy đôi khi bạn cần quay lại Internalhtml, bất kể các phương thức tương đương trong DOM

di chuyển hoặc loại bỏ nó

Một phần tử chỉ có thể được gắn vào một tổ tiên tại một thời điểm. Nếu bạn gắn một phần tử vào vị trí thứ 2, phần tử đó sẽ bị xóa khỏi vị trí ban đầu

dùng thử. Chèn một đoạn mới phía trên đoạn này. Sau đó chèn lại sau đoạn này. Cuối cùng, xóa đoạn văn khỏi tài liệu

Một phần tử không thể tự loại bỏ nó, nhưng phần tử cha của nó có thể

tạo một đoạn có chứa một siêu liên kết

Trong ví dụ trên, đoạn chứa một nút văn bản. Ví dụ sau minh họa việc tạo một đoạn văn có nội dung phức tạp hơn. Nó không yêu cầu phương pháp mới, nhưng yêu cầu nội dung phải được lắp ráp theo đúng thứ tự

Xem xét đánh dấu này

Bấm vào đây để biết thêm

Một trình duyệt hiển thị câu này dưới dạng một câu, nhưng nó được xây dựng từ 3 phần

• một nút văn bản — chứa "Nhấp chuột"
• một nút phần tử — "a" (có nút văn bản chứa "ở đây")
• một nút văn bản — chứa " để biết thêm thông tin. "

Các dòng tiếp theo sẽ tạo đoạn văn trong thời gian thực. Chúng có thể được thực hiện theo một thứ tự khác, nhưng để rõ ràng, trước tiên chúng tạo một liên kết hoàn chỉnh, sau đó tạo đoạn văn

// create the new link
var newA = document.createElement("a");  // create a new anchor
newA.setAttribute("href","more.html");  // create its hypertext reference
var a_text  = document.createTextNode("here");  // create A's text node
newA.appendChild(a_text);  // append A's text node

// create the new paragraph
var newP = document.createElement("p");  // create a new paragraph
newP.setAttribute("id", "plink");  // assign it an ID

// create the paragraph's text nodes
var p_text0 = document.createTextNode("Click ");  // create P's 1st text node
var p_text1 = document.createTextNode(" for more info.");  // create P's 2nd text node

// assemble the paragraph
newP.appendChild(p_text0);
newP.appendChild(newA);  // the entire link is inserted here
newP.appendChild(p_text1);

"newP" hiện đã sẵn sàng để được đính kèm vào tài liệu bằng cách sử dụng bất kỳ phương pháp nào được hiển thị trong ví dụ trước

Tuy nhiên, điều gì sẽ xảy ra nếu bạn cần chèn một cụm từ vào giữa câu, in nghiêng một từ hoặc thay đổi một từ bình thường thành một liên kết hoạt động?

Trang tiếp theo cho biết cách chia các nút văn bản đơn giản thành các cấu trúc phức tạp hơn và cách kết hợp lại chúng khi thích hợp

Làm cách nào để tạo các phần tử trong JavaScript?

Làm cách nào để tạo phần tử trong JavaScript với lớp?

Làm cách nào để tạo phần tử HTML bằng JS?

Làm cách nào để tạo phần tử trong div bằng JavaScript?