Thứ Năm, 23 tháng 1, 2014
JavaScript phần tử HTML DOM (nút)
Thêm và xóa các nút (HTML Elements)
Tạo mới các yếu tố HTML (nút)
Để thêm một yếu tố mới vào DOM HTML, bạn phải tạo các phần tử (nút phần tử) đầu tiên, và sau đó thêm nó vào một yếu tố hiện tại.
Ví dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
Thử nó cho mình »
Giải thích ví dụ
Mã này tạo ra một yếu tố <p> mới:
var para=document.createElement("p");
Để thêm văn bản vào các yếu tố <p>, bạn phải tạo một nút văn bản đầu tiên. Mã này tạo ra một nút văn bản:
var node=document.createTextNode("This is a new paragraph.");
Sau đó, bạn phải nối thêm các nút văn bản đến các yếu tố <p>:
para.appendChild(node);
Cuối cùng, bạn phải thêm các yếu tố mới vào một yếu tố hiện tại.
Mã này tìm thấy một yếu tố hiện tại:
var element=document.getElementById("div1");
Mã này gắn thêm các yếu tố mới để các yếu tố hiện tại:
element.appendChild(para);
Tạo ra yếu tố HTML mới - insertBefore ()
Phương pháp appendChild () trong ví dụ trước, nối các yếu tố mới là con cuối cùng của mẹ.
Nếu bạn không muốn điều đó, bạn có thể sử dụng insertBefore () phương pháp:
Ví dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
Thử nó cho mình »
Loại bỏ hiện tại yếu tố HTML
Để loại bỏ một phần tử HTML, bạn phải biết phụ huynh của các yếu tố:
Ví dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
Thử nó cho mình »
Giải thích ví dụ
Tài liệu HTML này chứa một phần tử <div> với hai nút con (hai yếu tố <p>):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Tìm các phần tử với id = "div1":
var parent=document.getElementById("div1");
Tìm các phần tử <p> với id = "p1":
var child=document.getElementById("p1");
Loại bỏ các con của phụ huynh:
parent.removeChild(child);
 | Nó sẽ được tốt đẹp để có thể loại bỏ một yếu tố mà không đề cập đến cha mẹ. Nhưng xin lỗi. DOM cần phải biết cả hai yếu tố bạn muốn loại bỏ, và cha mẹ của nó. |
|---|
Đây là một cách giải quyết chung: Tìm trẻ mà bạn muốn loại bỏ, và sử dụng tài sản parentNode của nó để tìm cha mẹ:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
child.parentNode.removeChild(child);
Thay thế HTML Elements
Để thay thế một phần tử HTML DOM, sử dụng replaceChild (phương pháp):
Ví dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét