JS에서appendChild와 추가의 차이점

JS에서appendChild와append의차이점은특정코드예제가필요합니다

JavaScript에서는 DOM(Document Object Model)에 하위 요소를 동적으로 추가해야 할 때 일반적으로 AppendChild 및 Append 메서드를 사용합니다. 그 목적은 상위 요소에 하위 요소를 추가하는 것이지만 용도에는 몇 가지 차이점이 있습니다.

1.appendChild 메소드
appendChild 메소드는 지정된 상위 노드에 하위 노드를 추가하는 데 사용되는 DOM 노드 객체의 메소드 중 하나입니다. 기본 구문은 다음과 같습니다.

parentNode.appendChild(childNode);

그 중 parentNode는 자식 노드를 추가하는 부모 노드이고, childNode는 추가되는 자식 노드입니다.

다음은 상위 요소 div와 하위 요소 p가 있다고 가정하는 구체적인 코드 예입니다.

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

appendChild 메서드를 사용하여 하위 요소 p를 상위 요소 div에 추가할 수 있습니다.

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

위 예에서 , 하위 노드가 상위 노드에 추가됩니다. 이때 div의 HTML 구조는 다음과 같습니다.

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

2. 추가 방법
추가 방법은 querySelector 또는 querySelectorAll 선택기를 사용하여 지정된 HTML 요소를 상위 요소에 추가합니다. 기본 구문은 다음과 같습니다.

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

그 중 parentElement는 추가할 상위 요소이고, element는 추가할 HTML 요소입니다.

다음은 상위 요소 div와 하위 요소 p가 있다고 가정하는 특정 코드 예제입니다.

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

추가 메서드를 사용하여 하위 요소 p를 상위 요소 div에 추가할 수 있습니다.

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

위 예에서 , 하위 요소가 상위 요소에 추가됩니다. 이때 div의 HTML 구조는 다음과 같습니다.

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

3. AppendChild와 Append의 차이점

1. 매개변수 유형:

   • appendChild는 추가할 하위 노드인 하나의 매개변수만 허용합니다.
   append 메소드는 여러 매개변수를 허용하여 여러 하위 요소를 한 번에 추가할 수 있습니다.
2. 반환 값:
   appendChild 메서드는 새로 추가된 하위 노드를 반환합니다.
   • append 메서드에는 반환 값이 없습니다.
3. 문자열은 자동으로 텍스트 노드로 변환됩니다.
   append 메소드를 사용하면 문자열이나 HTML 코드를 매개변수로 전달할 수 있으며 자동으로 텍스트 노드로 변환하여 상위 요소에 추가합니다.
   • appendChild 메소드만 노드를 허용합니다. 객체를 인수로 사용하면 문자열을 상위 요소에 직접 추가할 수 없습니다.

다음은 AppendChild 메소드와 Append 메소드의 차이점을 비교한 구체적인 코드 예시입니다.

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.");

위 코드를 통해 Append 메소드는 HTML 요소를 직접 추가할 수 있을 뿐만 아니라 HTML 요소를 직접 변환할 수도 있음을 알 수 있습니다. strings는 텍스트 노드이며 상위 요소에 추가됩니다.

요약하자면, 상위 요소에 하위 요소를 추가할 때 AppendChild와 Append 메소드 간에는 몇 가지 차이점이 있습니다. 사용 과정에서 우리의 목적을 달성하는 데 더 적합한 방법을 유연하게 선택할 수 있습니다.

위 내용은 JS에서appendChild와 추가의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!