/Hàm appendTo trong JQuery API
Các hàm built-in16/10/2023

Hàm appendTo trong JQuery API

Hàm appendTo là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để chèn một tập hợp các phần tử đã được lựa chọn vào cuối các phần tử được chỉ định.

1. Cú pháp hàm appendTo

Hàm appendTo dùng để chèn một tập hợp các phần tử đã lựa chọn vào cuối các phần tử được chỉ định.

Cú pháp:

$(elements).appendTo(target);

Hoặc

jQuery(elements).appendTo(target);

Tham số:

  • elements: Selector, chuỗi HTML, phần tử, mảng phần tử hoặc đối tượng jQuery – Tập hợp các phần tử mà bạn muốn chèn vào cuối phần tử(s) được chỉ định.
  • target: Selector, chuỗi HTML, phần tử, mảng phần tử hoặc đối tượng jQuery – Phần tử(s) mà elements sẽ được chèn vào cuối.

Kết quả trả về:

  • Trả về tập hợp các phần tử đã được chèn vào cuối các phần tử được chỉ định.

Phiên bản hỗ trợ:

  • Hàm appendTo đã được giới thiệu từ phiên bản 1.0 của jQuery.

Ghi chú:

  • appendTo và append đều có chức năng tương tự nhau, khác biệt chủ yếu nằm ở cú pháp và vị trí đặt nội dung và đối tượng mục tiêu.
  • Với appendTo, nội dung được đặt trước phương thức, có thể là một biểu thức lựa chọn hoặc một markup được tạo động, và nó được chèn vào cuối phần tử mục tiêu đã chỉ định.
Hàm appendTo trong JQuery API

2. Một số ví dụ sử dụng hàm appendTo

2.1. Dùng để thêm các Selector, chuỗi HTML, phần tử, mảng phần tử

Dưới đây dùng sử dụng hàm appendTo để thêm nhiều thành phần như: Selector, chuỗi HTML, phần tử, mảng phần tử vào cùng một lúc vào một target

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>appendTo Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h3>Target Container:</h3>
<div id="targetContainer">
  Target Container Content
</div>

<h3>Elements to Append:</h3>
<div id="element1">
  <p>This is element 1 to be appended.</p>
</div>
<div id="element2">
  <p>This is element 2 to be appended.</p>
</div>
<div id="element3">
  <p>This is element 3 to be appended.</p>
</div>

<button id="appendButton">Append Elements</button>

<script>
  $(document).ready(function() {
    // Xử lý sự kiện khi nút được nhấn
    $('#appendButton').click(function() {
      // Chọn các phần tử để được thêm vào
      var elementsToAppend = [$('#element1'), '<p>This is a string of HTML to be appended.</p>', $('<p>This is an element to be appended.</p>'), [document.createElement('p'), document.createElement('span')]];

      // Chọn phần tử mục tiêu để thêm vào
      var targetContainer = $('#targetContainer');

      // Sử dụng hàm appendTo để thêm các phần tử vào phần tử mục tiêu
      for (var i = 0; i < elementsToAppend.length; i++) {
        // Tạo một đối tượng jQuery từ phần tử DOM hoặc chuỗi HTML
        var element = $(elementsToAppend[i]);

        // Sử dụng .appendTo() trên đối tượng jQuery
        element.appendTo(targetContainer);
      }
    });
  });
</script>

</body>
</html>

Trong ví dụ này:

  • Chúng ta đã chuẩn bị nhiều thành phần để thêm vào, bao gồm một phần tử jQuery ($('#element1')), một chuỗi HTML, một phần tử tạo động và một mảng phần tử.
  • Chúng ta sử dụng một mảng elementsToAppend để chứa các thành phần cần thêm.
  • Bằng cách sử dụng vòng lặp, chúng ta duyệt qua mảng và sử dụng appendTo để thêm từng thành phần vào targetContainer.

Nhấp vào nút “Append Elements” để thực hiện thêm nhiều thành phần vào phần tử mục tiêu (targetContainer).

2.2. Thêm vào nhiều target khác nhau thông qua Selector

Để thêm “Selector, chuỗi HTML” vào nhiều target khác nhau thông qua Selector của target, chúng ta có thể lặp qua danh sách các target và sử dụng hàm appendTo cho mỗi target.

Dưới đây là ví dụ minh họa:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>appendTo Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h3>Target Container 1:</h3>
<div class="targetContainer" id="target1">
  Target Container 1 Content
</div>

<h3>Target Container 2:</h3>
<div class="targetContainer" id="target2">
  Target Container 2 Content
</div>

<h3>Elements to Append:</h3>
<div id="elementsToAppend">
  <p>This is some content to be appended.</p>
</div>

<button id="appendButton">Append Elements</button>

<script>
  $(document).ready(function() {
    // Xử lý sự kiện khi nút được nhấn
    $('#appendButton').click(function() {
      // Chọn các phần tử để được thêm vào
      var elementsToAppend = '<p>This is a string of HTML to be appended.</p>';

      // Chọn các target container bằng Selector
      var targetContainers = $('.targetContainer');

      // Lặp qua từng target container và sử dụng hàm appendTo để thêm phần tử
      targetContainers.each(function() {
        $(elementsToAppend).appendTo($(this));
      });
    });
  });
</script>

</body>
</html>

Trong ví dụ này:

  • Chúng ta đã sử dụng cùng một nội dung HTML (elementsToAppend) để thêm vào các target khác nhau.
  • Chúng ta chọn các target container bằng cách sử dụng Selector $('.targetContainer').
  • Sau đó, chúng ta lặp qua từng target container và sử dụng appendTo để thêm nội dung vào mỗi target container.

2.3. So sánh appendTo và append

Hàm appendTo và hàm append đều thực hiện chức năng tương tự: chèn phần tử hoặc nội dung vào cuối một phần tử mục tiêu.

Sự khác biệt chủ yếu giữa chúng nằm ở cú pháp và vị trí đặt nội dung và đối tượng mục tiêu.

Dưới đây là một ví dụ minh họa sự khác biệt giữa hàm appendTo và hàm append:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>appendTo vs append Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .container {
      border: 2px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<h3>Target Container:</h3>
<div class="container" id="targetContainer">
  Target Container Content
</div>

<h3>Element to Append:</h3>
<div class="container" id="elementToAppend">
  <p>This is some content to be appended.</p>
</div>

<button id="appendToButton">appendTo</button>
<button id="appendButton">append</button>

<script>
  $(document).ready(function() {
    // Xử lý sự kiện khi nút "appendTo" được nhấn
    $('#appendToButton').click(function() {
      // Kiểm tra nếu #elementToAppend nằm trong #targetContainer
      if ($('#elementToAppend').parent().is('#targetContainer')) {
        // Nếu đã nằm trong, thì chuyển ra ngoài
        $('#elementToAppend').appendTo('body');
      } else {
        // Nếu không nằm trong, thì chuyển vào #targetContainer
        $('#elementToAppend').appendTo('#targetContainer');
      }
    });

    // Xử lý sự kiện khi nút "append" được nhấn
    $('#appendButton').click(function() {
      // Kiểm tra nếu #elementToAppend nằm trong #targetContainer
      if ($('#elementToAppend').parent().is('#targetContainer')) {
        // Nếu đã nằm trong, thì chuyển ra ngoài
        $('#elementToAppend').appendTo('body');
      } else {
        // Nếu không nằm trong, thì chuyển vào #targetContainer
        $('#elementToAppend').appendTo('#targetContainer');
      }
    });
  });
</script>

</body>
</html>

Trong ví dụ này, khi bạn nhấp vào “appendTo”, phần tử #elementToAppend sẽ được chuyển đến hoặc từ #targetContainer. Cùng một cách, khi bạn nhấp vào “append”, phần tử sẽ di chuyển đến hoặc từ #targetContainer.

Related posts