Hướng dẫn dùng replacechild javascript trong PHP

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

Nội dung chính Show

Loại bỏ phần tử
Thay thế phần tử
replaceWith trong JavaScript
replaceChild trong JavaScript
Tổng kết

`document.createElement(tag_name)`	tạo ra phần tử có thẻ `tag_name` như `a`, `p`, `div` ...
`element.cloneNode()`	Tạo ra một phần tử bằng cách nhân bản phần tử chỉ ra (`element`)
`document.createTextNode(text)`	tạo phần tử tử văn bản `text` HTML

 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

`element.appendChild(newNode)`	Thêm phần tử `newNode` vào phần tử `element` nó trở thành phần tử con sau cùng của `element`
`element.insertBefore(newNode, node2)`	Chèn phần tử `newNode` nằm phía trước `node2`
`element.replaceChild(newNode, oldNode)`	Thay thế phần tử `oldNode` bằng phần tử `newNode`

Ví dụ sau tạo ra một phần tử đoạn văn p sau đó chèn nó vào phần tử div đang có sẵn trong DOM HTML

nội dung ví dụ

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 removeChild(node)


  This is a paragraph.
  This is another paragraph.

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 parentNode để bỏ qua bước tìm phần tử cha trong DOM: child.parentNode.removeChild(child);


  This is a paragraph.
  This is another paragraph.

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 đó element là nút cha


    This is a paragraph.
    This is another paragraph.

Hướng dẫn cách thay thế Node trong JavaScript. Bạn sẽ học được 2 phương pháp thay thế Node chỉ định bằng một Node mới trong JavaScript sau bài học này.

Chúng ta có 2 phương pháp thay thế Node trong JavaScript như sau:

Phương thức replaceWith: Thay thế Node chỉ định bằng một Node mới
Phương thức replaceChild: Thay thế Node con chỉ định của một Node cha bằng một Node mới

replaceWith trong JavaScript

Cú pháp

replaceWith trong JavaScript là một phương thức của Element Object, có tác dụng thay thế Node chỉ định bằng một Node khác trong JavaScript.

Cú pháp sử dụng replaceWith trong JavaScript để thay thế Node như sau:

old_node.replaceWith(nodesOrDOMStrings)

Trong đó old_node là Node ban đầu cần được thay thế. Chúng ta có thể chỉ định đối số (các Node mới dùng để thay thế) dưới dạng một hoặc một chuỗi các Node cách nhau bởi dấu phẩy (,), hoặc là một DOMString (một chuỗi ký tự). Trong trường hợp DOMString được chỉ định, nội dung DOMString sẽ được tự động chuyển sang TextNode trước khi được dùng để thay thế Node ban đầu.

Cụ thể thì trong trường hợp cần thay thế Node chỉ định bằng một Node mới, chúng ta sử dụng cú pháp sau:

old_node.replaceWith(new_node)

Còn trong trường hợp cần thay thế Node chỉ định bằng một tập hợp các Node mới, chúng ta viết các Node cách nhau bởi dấu phẩy như sau:

old_node.replaceWith( new_node1 ,new_node2 ,new_node3, ...)

Còn trong trường hợp cần thay thế Node chỉ định bằng một DOMString, chúng ta viết như sau:

old_node.replaceWith(DOMString)

Ví dụ, chúng ta có thể tạo một Node với thẻ div, và thay thế Node này cho Node ban đầu có id bằng sample như sau:

let new_node = document.createElement('div');
let old_node = document.getElementById('sample');

old_node.replaceWith(new_node);

Mã mẫu

Sau đây hãy cùng xem cách dùng replaceWith để thay thế Node chỉ định bằng một Node mới với ví dụ sau:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng replaceWithtitle>
head>
<body>

<p>Danh sách tên shopp>

<ul id="shopinfo">
  <li id="item1">Shop bà Támli>
  <li id="item2">Shop mẹ và béli>
ul>


<button onClick="getElement();">Thêm Node conbutton>

<script>
function getElement(){
    let new_node = document.createElement('li');
    new_node.prepend('Shop chị hai');

    let old_node = document.getElementById('item2');
    old_node.replaceWith(new_node);
}
script>
body>
html>

Trong mã HTML trên, chúng ta tạo một Node mới với tag li, rồi thêm DOMString có giá trị Shop chị hai vào Node này bằng phương thức prepend.

Sau đó, bằng phương thức replaceWith, chúng ta đã thay thế Node này cho Node ban đầu có id="item2".

Và kết quả:

Hướng dẫn dùng replacechild javascript trong PHP

Xem thêm: Tạo Node mới trong JavaScript

replaceChild trong JavaScript

Cú pháp

replaceChild trong JavaScript là một phương thức của Node Object, có tác dụng Thay thế Node con chỉ định của một Node cha bằng một Node mới

Cú pháp sử dụng replaceChild trong JavaScript để thay thế Node con như sau:

parentnode.replaceChild(newChild, oldChild)

Trong đó oldChild là Node con ban đầu cần được thay thế bằng Node mới newChild.

Ví dụ, chúng ta có thể tạo một Node mới với thẻ div, và thay thế Node này vào Node con có id bằng abc của Node cha có id bằng def như sau:

let newChild = document.createElement('div');

let parentnode = document.getElementById('def');
let oldChild = document.getElementById('abc');

parentnode.replaceChild(newChild, oldChild);

Mã mẫu

Sau đây hãy cùng xem cách dùng replaceChild để thay thế Node con chỉ định bằng một Node khác trong JavaScript.

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng replaceChildtitle>
head>
<body>

<p>Danh sách tên shopp>

<ul id="shopinfo">
  <li id="item1">Shop bà Támli>
  <li id="item2">Shop mẹ và béli>
ul>


<button onClick="getElement();">Thêm Node conbutton>

<script>
function getElement(){
    let new_node = document.createElement('li');
    new_node.prepend('Shop chị hai');

    let old_node = document.getElementById('item2');
    old_node.replaceChild(new_node);
}
script>
body>
html>

Trong mã HTML trên, chúng ta tạo một Node mới với tag li, rồi thêm DOMString có giá trị Shop chị hai vào Node này bằng phương thức prepend.

Sau đó, bằng phương thức replaceChild, chúng ta đã thay thế Node này cho Node con có id="item2" của Node cha có id="shopinfo".

Và kết quả:

Xem thêm: Tạo Node mới trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách thay thế Node trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> học javascript - lập trình javascript cơ bản>>13. dom trong javascript

Profile

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.