Thêm Node anh em trong JavaScript | Laptrinhcanban.com

HOME › >>

Thêm Node anh em trong JavaScript

Hướng dẫn cách thêm Node anh em trong JavaScript. Bạn sẽ học được 4 phương pháp thêm một Node anh em vào trước hoặc sau Node chỉ định trong JavaScript sau bài học này.

Chúng ta có 4 phương pháp thêm Node anh em vào trước hoặc sau Node chỉ định trong JavaScript như sau:

  • Phương thức before: Thêm các Node anh em vào đằng trước Node chỉ định
  • Phương thức insertBefore: Thêm Node anh em vào đằng trước Node con chỉ định của một Node cha
  • Phương thức after : Thêm các Node anh em vào đằng sau Node chỉ định
  • Dịch chuyển Node anh em đã tồn tại

before trong JavaScript

Cú pháp

before trong JavaScript là một phương thức của Element Object, có tác dụng thêm một hoặc nhiều Node anh em (có cùng Node cha) vào đằng trước Node chỉ định trong JavaScript.

Cú pháp sử dụng before trong JavaScript để thêm Node anh em như sau:

childnode.before(nodesOrDOMStrings)

Trong đó childnode là Node chỉ định cần thêm các Node anh em. Chúng ta có thể chỉ định đối số (các Node anh em cần thêm vào) 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 (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 thêm vào trong Node ban đầu.

Cụ thể thì trong trường hợp cần thêm một Node anh em vào đằng trước Node chỉ định, chúng ta sử dụng cú pháp sau:

childnode.before(bro_node)

Trong đó bro_node là Node anh em cần thêm vào trước childnode.

Còn trong trường hợp cần thêm nhiều Node anh em cùng lúc, chúng ta viết các Node anh em cách nhau bởi dấu phẩy như sau:

childnode.before(bro_node1 ,bro_node2 ,bro_node3, ...)

Còn trong trường hợp cần thêm một DOMString vào Node ban đầu, chúng ta viết như sau:

childnode.before(DOMString)

Ví dụ, chúng ta có thể tạo một Node anh em với thẻ div, và thêm Node này vào đằng trước Node có id bằng sample như sau:

let bro_node = document.createElement('div');
let childnode = document.getElementById('sample');

childnode.before(bro_node);

Mã mẫu

Sau đây hãy cùng xem cách thêm Node anh em vào đằng trước Node chỉ định với ví dụ sau:

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

<p>Danh sách tên shop</p>

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


<button onClick="getElement();">Thêm Node anh em</button>

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

let child = document.getElementById('item2');
child.before(bro);
}
</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 append.

Sau đó, bằng phương thức before, chúng ta đã thêm Node vừa tạo này vào đằng trước Node có id bằng item2, như là Node anh em của Node này.

Và kết quả:

before trong JavaScript

insertBefore trong JavaScript

Cú pháp

insertBefore trong JavaScript là một phương thức của Node Object, có tác dụng thêm một Node con mới vào đằng trước Node con chỉ định của một Node trong JavaScript.

Cú pháp sử dụng insertBefore trong JavaScript để thêm Node con như sau:

parentnode.insertBefore(new_childnode, childnode)

Trong đó:

  • parentnode là Node cha
  • childnode là Node con chỉ định. Nếu chỉ định childnode bằng null, Node con mới sẽ được thêm vào đằng sau Node con cuối cùng của Node cha
  • new_childnode là Node con mới cần thêm vào đằng trước childnode

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

let new_child = document.createElement('div');
let parent = document.getElementById('def');
let child = document.getElementById('abc');

parent.insertBefore(new_child, child);

Chúng ta cũng có thể chỉ định childnode với giá trị null. Khi đó, Node con mới sẽ được thêm vào đằng sau Node con cuối cùng của Node cha.

let new_child = document.createElement('div');
let parent = document.getElementById('def');

parent.insertBefore(new_child, null);

Mã mẫu

Sau đây hãy cùng xem cách thêm Node con mới vào đằng trước Node con chỉ định của một Node trong JavaScript:

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

<p>Danh sách tên shop</p>

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


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

<script>
function getElement(){
let parent = document.getElementById('shopinfo');
let child = document.getElementById('item2');


let new_child = document.createElement('li');
new_child.append('Shop chị hai');


parent.insertBefore(new_child, child);
}
</script>
</body>
</html>

Trong mã HTML trên, chúng ta tạo Node con (new_child) 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 append.

Sau đó, bằng phương thức insertBefore, chúng ta đã thêm Node con vừa tạo này vào đằng trước Node con có id bằng item2 của Node cha có id="shopinfo".

Và kết quả:

insertBefore trong JavaScript

after trong JavaScript

Cú pháp

after trong JavaScript là một phương thức của Element Object, có tác dụng thêm một hoặc nhiều Node anh em (có cùng Node cha) vào đằng sau Node chỉ định trong JavaScript.

Cú pháp sử dụng after trong JavaScript để thêm Node anh em như sau:

childnode.after(nodesOrDOMStrings)

Trong đó childnode là Node chỉ định cần thêm các Node anh em. Chúng ta có thể chỉ định đối số (các Node anh em cần thêm vào) 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 (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 sau khi được thêm vào trong Node ban đầu.

Cụ thể thì trong trường hợp cần thêm một Node anh em vào đằng sau Node chỉ định, chúng ta sử dụng cú pháp sau:

childnode.after(bro_node)

Trong đó bro_node là Node anh em cần thêm vào sau childnode.

Còn trong trường hợp cần thêm nhiều Node anh em cùng lúc, chúng ta viết các Node anh em cách nhau bởi dấu phẩy như sau:

childnode.after(bro_node1 ,bro_node2 ,bro_node3, ...)

Còn trong trường hợp cần thêm một DOMString vào Node ban đầu, chúng ta viết như sau:

childnode.after(DOMString)

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

let bro_node = document.createElement('div');
let childnode = document.getElementById('sample');

childnode.after(bro_node);

Mã mẫu

Sau đây hãy cùng xem cách thêm Node anh em vào đằng sau Node chỉ định với ví dụ sau:

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

<p>Danh sách tên shop</p>

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


<button onClick="getElement();">Thêm Node anh em</button>

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

let child = document.getElementById('item2');
child.after(bro);
}
</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 append.

Sau đó, bằng phương thức after, chúng ta đã thêm Node vừa tạo này vào đằng sau Node có id bằng item2, như là Node anh em của Node này.

Và kết quả:

after trong JavaScript

Dịch chuyển một Node đã tồn tại trước đó

Cú pháp

Việc thêm một Node không giới hạn đối với các Node mới được tạo, bạn có thể thêm các Node đã tồn tại từ trước đó. Trong trường hợp này, Node tồn tại trước đó sẽ bị xóa khỏi Node cha hiện tại của nó, và được thêm vào Node cha mới được chỉ định. Và kết quả thì nó sẽ được di chuyển khỏi Node cha cũ và sang Node cha mới.

Ví dụ, để di chuyển một Node có thuộc tính id là abc có Node cha là def vào đằng trước Node có id là ghk, hãy viết:

let child = document.getElementById('abc');
let bro = document.getElementById('ghk');

child.before(bro);

Trong trường hợp này, Node child sẽ tự động bị xóa khỏi Node cha ban đầu và sau đó được thêm vào đằng sau Node child và trở thành Node anh em của Node child này.

Mã mẫu

Sau đây hãy cùng xem cách di chuyển Node hiện tại với ví dụ sau:

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

<p>Task dự định</p>

<ul id="plans">
<li id="task01">Viết web</li>
<li id="task02">Dọn nhà</li>
</ul>

<p>Task đã hoàn thành</p>

<ul id="done">
<li id="task03">Nấu ăn</li>
<li id="task04">Gọi điện</li>
</ul>

<button onClick="getElement();">Di chuyển Node</button>

<script>

function getElement(){
let bro = document.getElementById('task01');

let child = document.getElementById('task03');

child.after(bro);
}
</script>
</body>
</html>

Trong mã HTML trên, chúng ta đã lấy một Node đã tồn tại từ trước có id="task01", sau đó thêm nó vào đằng sau Node có id="task03" bằng phương thức after. Kết quả thì Node đó sẽ được dịch chuyển ra khỏi Node cha ban đầu (có id="plans") và trở thành anh em có cùng Node cha mới có id="done".

Dịch chuyển Node trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách thêm Node anh em 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/them-node-anh-em-trong-javascript/

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  › >>

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.