How to clone a section in JavaScript

In front-end development, we often need to copy or clone an HTML element and insert it into other locations in the web page. This operation is very common, especially when dynamically generating tables, lists, menus, forms and other elements. In JavaScript, we can use many methods to clone sections, and this article will introduce you to several of them.

1. Use the cloneNode() method

cloneNode() is a method of cloning nodes in JavaScript. We can use it to copy a node. It has a Boolean parameter that specifies whether to clone all child nodes under the node at the same time. If the parameter is true, the child nodes will be cloned together.

The following is an example of using the cloneNode() method to clone a single node or multiple nodes:

// 克隆单个节点
var originalNode = document.getElementById("original");
var clonedNode = originalNode.cloneNode(true);
document.body.appendChild(clonedNode);

// 克隆多个节点
var originalNodes = document.getElementsByClassName("original");
for (var i = 0; i < originalNodes.length; i++) {
  var clonedNode = originalNodes[i].cloneNode(true);
  document.body.appendChild(clonedNode);
}

In the above code, we use the cloneNode() method and set the parameter to true to clone the original node and all its child nodes and appended to the document.

2. Use the innerHTML attribute

The innerHTML attribute returns a string containing the element and its sub-elements. We can use this attribute to clone the section. We can set the value of the innerHTML attribute to the value of the outerHTML attribute of the node to be cloned, thereby cloning the entire node.

The following is an example of using the innerHTML attribute to clone a single node or multiple nodes:

// 克隆单个节点
var originalHtml = document.getElementById("original").outerHTML;
document.body.insertAdjacentHTML("beforeend", originalHtml);

// 克隆多个节点
var originals = document.getElementsByClassName("original");
for (var i = 0; i < originals.length; i++) {
  var originalHtml = originals[i].outerHTML;
  document.body.insertAdjacentHTML("beforeend", originalHtml);
}

In the above code, we first obtain the outerHTML attribute value of the node that needs to be cloned, and then use insertAdjacentHTML() method to insert it into the DOM tree. In the above example, we inserted the node at the end of the document. You can insert it at other locations as needed.

3. Use jQuery’s clone() method

jQuery is a very popular JavaScript library that provides many convenient methods to manipulate the DOM. In jQuery, we can use the clone() method to copy a node. This method is similar to the cloneNode() method in JavaScript, but is more convenient and easier to use.

The following is an example of using jQuery's clone() method to clone a single node or multiple nodes:

// 克隆单个节点
var $original = $("#original");
var $cloned = $original.clone();
$("body").append($cloned);

// 克隆多个节点
var $originals = $(".original");
$originals.each(function() {
  var $cloned = $(this).clone();
  $("body").append($cloned);
});

In the above code, we first use the jQuery selector to obtain the node that needs to be cloned, and then use The clone() method clones the node and appends it to the document.

4. Summary

The above are several methods of cloning sections using JavaScript and jQuery. In actual development, we can choose different methods according to needs. The cloneNode() method is a native JavaScript method that is very fast and efficient, but it is also very convenient to use the innerHTML attribute. At the same time, if you use jQuery, the clone() method is also a good choice. Whichever method you choose, you should remember that the ultimate goal is to clone the node and all its children to a new location, and you should pay extra attention to the details when handling child nodes.

The above is the detailed content of How to clone a section in JavaScript. For more information, please follow other related articles on the PHP Chinese website!