Bạn có thể dùng JavaScript để tạo mới phần từ HTML sau đó chèn vào trang web. Đây là các cách giúp bạn tạo mới một phần tử HTML Show
var node = document.createTextNode("Tạo ra một phần tử"); var linknode = document.createElement("a"); linknode.href="https://xuanthulab.net/"; linknode.innerText="xuanthulab.net"; Ví dụ trên sẽ tạo ra một nút text, nhưng nó chưa hiện thị cho đến khi bạn gắn phần tử đó vào HTML document để nó là phần tử con của một phần tử nào đó, có một số cách để gắn phần tử tạo ra từ JavaScript vào DOM HTML
Ví dụ sau tạo ra một phần tử đoạn văn <div id ="demo">nội dung ví dụ</div> <button onclick="add_child()">KẾT QUẢ</button> <script> function add_child() { //tạo phần tử p var p = document.createElement("p"); //tạo phần tử text var node = document.createTextNode("Some new text"); //gắn node vào p p.appendChild(node); //Thay đổi một số thuộc tính của p p.appendChild(node); p.style.backgroundColor = 'red'; p.style.padding = "10px"; p.style.color = "white"; var div = document.getElementById("demo"); //gắn p vào div div.appendChild(p); } </script> nội dung ví dụ Loại bỏ phần tửĐể loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức <div id="demo"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent = document.getElementById("demo"); var child = document.getElementById("p1"); parent.removeChild(child); </script> Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất Bạn có thể sử dụng thủ thuật lấy thuộc tính <div id="demo"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var child = document.getElementById("p1"); child.parentNode.removeChild(child); </script> Thay thế phần tửĐể thay thể một phần tử
bằng một phần tử khác dùng cú pháp element.replaceChild(newNode, oldNode). Trong đó <div id="demo"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var p = document.createElement("p"); p.innerText = 'Đây là đoạn văn mới tạo ra'; var parent = document.getElementById("demo"); var child = document.getElementById("p1"); parent.replaceChild(p, child); </script> Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM) Cách thêm / Xóa phần tử thông qua JS DOM Thao tác các phần tử DOM trong JavaScriptBây giờ, qua 4 bài học trước bạn đã học cách chọn và định kiểu các thành phần HTML DOM, cách chọn đến phần tử DOM cũng như cách get / set thuộc tính cho nó. Trong chương này, chúng ta sẽ tìm hiểu cách thêm hoặc loại bỏ các phần tử DOM một cách linh hoạt hoặc lấy nội dung của chúng. Bởi vì khi lập trình web thực tế chúng ta sẽ thường xuyên cần tạo ra các bố cục động, khi thì thêm khối này, khi thì loại bỏ khối nọ. > Nếu bạn muốn trở thành một lập trình viên phát triển website "XỊN SÒ" thì xem ngay KHÓA HỌC LẬP TRÌNH (Full Stack) Hãy tiếp tục đọc bên dưới đây để biết cách làm thế nào nhé. Thêm phần tử mới vào trong DOMBạn có thể tạo phần tử mới trong tài liệu HTML một cách dễ dàng thông qua phương thức document.createEuity(). Phương thức này tạo ra một phần tử mới, nhưng nó không thêm ngay nó vào DOM. Bạn sẽ phải tự thêm nó vào DOM bằng một bước riêng biệt, như trong ví dụ sau: HTML:
JavaScript:
Phương thức appendChild() thêm phần tử mới vào cuối của bất kỳ phần tử con nào khác của nút cha được chỉ định. Tuy nhiên, nếu bạn muốn thêm phần tử mới vào đầu của bất kỳ phần tử nào khác, bạn có thể sử dụng phương thức insertBefore(), như trong ví dụ dưới đây: JavaScript:
Get và Set nội dung HTML trong DOMBạn cũng có thể dễ dàng lấy (get) hoặc thiết lập (set) nội dung của các thành phần HTML với thuộc tính innerHTML. Thuộc tính này set hoặc get nội dung bên trong thẻ HTML (Bên trong thẻ mở và thẻ đóng của nó) Hãy xem ví dụ sau để xem nó hoạt động như thế nào: HTML:
JavaScript:
Như bạn có thể thấy, bạn có thể dễ dàng chèn các phần tử mới vào DOM bằng cách sử dụng thuộc tính innerHTML. Nhưng có một vấn đề... thuộc tính innerHTML thay thế tất cả nội dung hiện có của một phần tử. Vì vậy, nếu bạn muốn chèn HTML vào tài liệu mà không thay thế nội dung hiện có của một phần tử, bạn có thể sử dụng phương thức insertAdjacentHTML(). Phương pháp này chấp nhận hai tham số: + Tham số đầu tiên: Vị trí cần chèn (nó phải là + Tham số thứ hai: Văn bản HTML cần chèn. Ví dụ sau đây sẽ minh họa cách phương thức trên hoạt động như thế nào: HTML (Chú ý những chỗ chú thích, đó là vị trí cần chèn):
JavaScript:
Lưu ý: Vị trí beforebegin và afterend chỉ hoạt động nếu node nằm trong cây DOM và có phần tử cha. Ngoài ra, khi chèn HTML vào một trang, hãy cẩn thận không sử dụng đầu vào của người dùng chưa được kiểm tra, để tránh các cuộc tấn công XSS. Loại bỏ các phần tử hiện có khỏi DOMTương tự, bạn có thể sử dụng phương thức removeChild() để xóa một node con khỏi DOM. Phương thức này cũng trả về node bị loại bỏ. Đây là một ví dụ: HTML:
JavaScript:
Bạn cũng có thể loại bỏ phần tử con mà không biết chính xác phần tử cha. Chỉ cần tìm phần tử con và sử dụng thuộc tính parentNode để tìm phần tử cha của nó. Thuộc tính này trả về cha của node được chỉ định trong cây DOM. Đây là một ví dụ: HTML:
JavaScript:
Thay thế các phần tử hiện có trong DOMBạn cũng có thể thay thế một phần tử trong HTML DOM bằng một phần tử khác bằng phương thức replaceChild(). Phương thức này chấp nhận hai tham số: + Node cần chèn + Node bị thay thế Nó có cú pháp như sau:
Hãy thử với ví dụ sau: HTML:
JavaScript:
Như vậy là hôm nay, mình đã hướng dẫn bạn học cách thêm vào xóa phần tử khỏi DOM bằng JavaScript. Cũng đơn giản thôi phải không nào? Hãy làm lại các ví dụ ít nhất 3 lần để đảm bảo bạn hiểu và nhớ chúng nhé. Chúc bạn học tốt. Đọc thêm: Get / Set thuộc tính bằng JS DOM |