The difference between appendChild and append in JS

The difference between appendChild and append in JS requires specific code examples

In JavaScript, when we need to dynamically add child elements to the DOM (Document Object Model) , we usually use the appendChild and append methods. Although their purpose is to add child elements to parent elements, there are some differences in their use.

1. appendChild method
The appendChild method is one of the methods of the DOM node object, used to add a child node to the specified parent node. The basic syntax is as follows:

parentNode.appendChild(childNode);

Among them, parentNode is the parent node to add the child node, and childNode is the child node to be added.

The following is a specific code example, assuming we have a parent element div and a child element p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

We can use the appendChild method to add the child element p to the parent element div:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);

In the above example, the child node is added to the parent node. At this time, the HTML structure of the div will become:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

2. append method
The append method appends the specified HTML element to a parent element by using the querySelector or querySelectorAll selector. The basic syntax is as follows:

parentElement.append(element[, ...elementN]);

Among them, parentElement is the parent element to be appended, and element is the HTML element to be appended.

The following is a specific code example, assuming we have a parent element div and a child element p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

We can use the append method to add the child element p to the parent element div:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);

In the above example, the child element is added to the parent element. At this time, the HTML structure of the div will become:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

3. The difference between appendChild and append

1. Parameter type:

   • appendChild It only accepts one parameter, which is the child node to be added; the
   • append method can accept multiple parameters and can add multiple child elements at one time.

2. Return value:

   • appendChild method returns the newly added child node;
   • append method has no return value.

3. Strings are automatically converted to text nodes:

   • append method allows passing strings or HTML codes as parameters and it will automatically Convert to text node and append to the parent element;
   • appendChild method only accepts node objects as parameters, and cannot directly add strings to the parent element.

The following is a specific code example that compares some differences between the appendChild and append methods:

var parent = document.getElementById("parent");

// 使用appendChild方法添加子节点
var child1 = document.createElement("p");
var text1 = document.createTextNode("This is child 1.");
child1.appendChild(text1);
parent.appendChild(child1);

// 使用append方法添加子元素和字符串
var child2 = document.createElement("p");
var text2 = document.createTextNode("This is child 2.");
child2.appendChild(text2);

var child3 = document.createElement("p");
child3.append("This is child ", 3); 

parent.append(child2, child3, "This is child 4.");

Through the above code, we can see the append method Not only can HTML elements be appended directly, but strings can be directly converted to text nodes and added to parent elements.

To sum up, there are some differences between the appendChild and append methods when adding child elements to parent elements. In the process of use, we can flexibly choose which method is more suitable to achieve our purposes.

The above is the detailed content of The difference between appendChild and append in JS. For more information, please follow other related articles on the PHP Chinese website!