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
bạn có thể tạo nhanh chóng với mã này.
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ể
________số 8_______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