Hướng dẫn insertafter javascript - javascript chèn sau

Trong bài này mình sẽ giới thiệu hàm insertAfter trong javascript, đây là hàm giúp chèn thêm các thẻ html vào sau một thẻ html nào đó.insertAfter trong javascript, đây là hàm giúp chèn thêm các thẻ html vào sau một thẻ html nào đó.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Thật đáng tiếc là hiện tại javascript chưa hỗ trợ hàm insertAfter. Vì vậy mình sẽ giúp bạn tự tạo ra một hàm insertAfter cực kì dễ dàng.javascript chưa hỗ trợ hàm insertAfter. Vì vậy mình sẽ giúp bạn tự tạo ra một hàm insertAfter cực kì dễ dàng.

Trong jQuery thì chúng ta có hàm $('selector').after(). Tuy nhiên, chúng ta đang sử dụng javascript thuần nên bạn có thể sử dụng hàm mình xây dựng trong bài này nhé.

insertAfter trong javascript là gì?

insertAfter javascript là một hàm được tạo ra nhằm mục đích giúp ta chèn các thẻ html vào đằng sau một thẻ khác. Hàm này không có sẵn trong thư viện của js, mà bạn phải tự tạo nó.

Javascript có hỗ tợ hàm insertBefore, hàm này có công dụng là chèn các thẻ html vào phía trước một thẻ được chỉ định. Vì vậy, ta sẽ áp dụng hàm này với một thủ thuật đơn giản để tạo ra hàm insertAfter:

Bài viết này được đăng tại [free tuts .net]

• Đầu tiên, chọn nút anh em tiếp theo của nút hiện có.
• Sau đó, chọn nút cha của nút hiện có và gọi phương thức insertBefore () trên nút cha để chèn một nút mới trước nút anh em đó.

Cụ thể hàm này như sau:

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

Để hiểu được hàm trên thì bạn phải hiểu hai khái niệm insertBefore và nextSibling. Hãy click vào link để đọc nhé.

Cách sử dụng insertAfter javascript

Bây giờ mình sẽ làm một ví dụ về cách dùng hàm insertAfter ở trên nhé.insertAfter ở trên nhé.

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

Khi click vào button thì sẽ chèn một node vào thẻ div có id là menu.

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

• insertAfter trong javascript là gì?
• Cách sử dụng insertAfter javascript
• 1. insertBefore trong javascript là gì?
• Khi click vào button thì sẽ chèn một node vào thẻ div có id là menu.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Thật đáng tiếc là hiện tại javascript chưa hỗ trợ hàm insertAfter. Vì vậy mình sẽ giúp bạn tự tạo ra một hàm insertAfter cực kì dễ dàng.javascript chưa hỗ trợ hàm insertAfter. Vì vậy mình sẽ giúp bạn tự tạo ra một hàm insertAfter cực kì dễ dàng.

Trong jQuery thì chúng ta có hàm $('selector').after(). Tuy nhiên, chúng ta đang sử dụng javascript thuần nên bạn có thể sử dụng hàm mình xây dựng trong bài này nhé.

insertAfter trong javascript là gì?

insertAfter javascript là một hàm được tạo ra nhằm mục đích giúp ta chèn các thẻ html vào đằng sau một thẻ khác. Hàm này không có sẵn trong thư viện của js, mà bạn phải tự tạo nó.

Bài viết này được đăng tại [free tuts .net]

Javascript có hỗ tợ hàm insertBefore, hàm này có công dụng là chèn các thẻ html vào phía trước một thẻ được chỉ định. Vì vậy, ta sẽ áp dụng hàm này với một thủ thuật đơn giản để tạo ra hàm insertAfter:

• Đầu tiên, chọn nút anh em tiếp theo của nút hiện có.
• Sau đó, chọn nút cha của nút hiện có và gọi phương thức insertBefore () trên nút cha để chèn một nút mới trước nút anh em đó.

Cụ thể hàm này như sau:

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

Để hiểu được hàm trên thì bạn phải hiểu hai khái niệm insertBefore và nextSibling. Hãy click vào link để đọc nhé.

Cách sử dụng insertAfter javascript

Bây giờ mình sẽ làm một ví dụ về cách dùng hàm insertAfter ở trên nhé.insertAfter ở trên nhé.

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

Khi click vào button thì sẽ chèn một node vào thẻ div có id là menu.

Trong bài này chúng ta sẽ tìm hiểu hàm insertBefore trong javascript, đây là hàm dùng để chèn một node html vào đằng trước một node khác.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Ở bài trước mình có hướng dẫn cách tạo hàm insertAfter, bài đó mình có nhắc đến hàm insertBefore. Vì vậy, hôm nay mình sẽ giải thích thật chi tiết về cách hoạt động của insertBefore để các bạn hiểu rõ hơn.

1. insertBefore trong javascript là gì?

insertBefore là một phương thức được tích hợp sẵn trong các node object của javascript. Nó giúp ta chèn một node vào đằng trước một node khác.

Nếu bạn đã chèn một node vào vị trí nào đó, và bạn tiếp tục chèn nó vào một vị trí khác nữa thì tại ví trí cũ sẽ bị xóa, sau đó chèn vào vị trí mới. Nói cách khác, node object trong javascript hoạt động theo kiểu tham chiếu nên nó là duy nhất.

Bài viết này được đăng tại [free tuts .net]

Cú pháp như sau::

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

Trong đó::

• <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  1 là node chèn, đây là giá trị trả về của hàm

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  2.

• <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  3 là node cha của node mới được chèn.

• <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  4 là node dùng để chèn.

• <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  5 là node được chèn. Nếu đây là

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  6 thì newNode sẽ được chèn vào vị trí cuối cùng các node con của

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  3.Nếu đây là

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  6 thì newNode sẽ được chèn vào vị trí cuối cùng các node con của

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  3.

Tóm lại, referenceNode là một tùy chọn, nghĩa là bạn có thể truyền hoặc không. Còn các tham số còn lại là bắt buộc.

2. Cách dùng insertBefore javascript

Ví dụ: Giả sử mình có một đoạn mã HTML như sau.: Giả sử mình có một đoạn mã HTML như sau.

<div id="parentElement">
   <span id="childElement">foo bar</span>
</div>

Bây giờ mình muốn chèn thêm một thẻ span vào đằng trước thẻ span ở trên thì các bước thực hiện như sau:

• Đầu tiên cần xác đinh

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  3, đó chính là thẻ

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  9.
• Tiếp theo cần xác định

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  5, đó chính là thẻ

  function insertAfter(newNode, existingNode) {
      existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }

  1.
• Cuối cùng cần xác định

  <ul>
      <li>HTML</li>   
      <li id="menu">CSS</li>
      <li>jQuery</li>
  </ul>
  <p>
      <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
  </p>
  <script>
      function insertAfter(newNode, existingNode) {
          existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }
  
      function insertAfterMenu(){
          let menu = document.getElementById('menu');
          let li = document.createElement('li');
          li.textContent = "Javascript";
  
          insertAfter(li, menu);
      }
  </script>

  4, đó chính là một thẻ span mới.

Cụ thể sẽ như sau:

// Xác định newNode
let newNode = document.createElement('span');
newNode.textContent = "Bla freetuts.net";

// Xác định referenceNode
let referenceNode = document.getElementById('referenceNode');

// Xác định parentNode
let parentNode = document.getElementById('parentElement');
// Hoặc let parentNode = referenceNode.parentNode;

// Thực hiện chèn
let insertedNode = parentNode.insertBefore(newNode, referenceNode);

Như vậy là mình đã hướng dẫn xong cách sử dụng insertBefore trong Javascript. Qua đó bạn cần chú ý một số vấn đề như sau:

• Cần phải xác định node cha - đó chính là node chứa tất cả các node con (node chèn lẫn node được chèn).
• Nếu referenceNode là null hoặc không tồn tại thì newNode sẽ được chèn vào vị trí cuối cùng trong các node con của node cha.