네이티브 js는 Append() 메소드를 구현합니다.

append() 메서드의 기본 js 구현에는 특정 코드 예제가 필요합니다.

JavaScript 코드를 작성할 때 웹 페이지의 지정된 요소에 새 콘텐츠를 추가해야 하는 경우가 많습니다. 일반적인 작업은 innerHTML 속성을 통해 요소의 HTML 콘텐츠를 설정하는 것입니다. 그러나 innerHTML 속성을 사용하면 요소 내부의 이벤트 리스너, 스타일 등이 손실되는 경우가 있습니다. 콘텐츠 추가 기능을 더 잘 구현하기 위해 우리는 스스로append() 메소드를 구현할 수 있습니다.

append() 메서드는 지정된 요소의 끝에 새 콘텐츠를 추가할 수 있습니다. 즉, 지정된 HTML 코드 문자열을 요소 내부에 추가할 수 있습니다. 다음은 기본 JavaScript를 사용하여 append() 메서드를 구현하는 코드입니다.

function append(element, html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  
  while (div.children.length > 0) {
    element.appendChild(div.children[0]);
  }
}

위 코드에서는 두 개의 매개변수를 받는append()라는 함수를 정의합니다. 요소는 콘텐츠를 추가할 대상 요소를 나타내고, html 추가할 HTML 코드 문자열을 나타냅니다.

먼저 div 요소를 생성한 후 div 요소의 innerHTML 속성에 추가할 HTML 코드 문자열을 할당합니다. 이러한 방식으로 HTML 코드 문자열을 DOM 요소로 구문 분석합니다.

다음으로 while 루프를 사용하여 div 요소의 하위 노드를 순회하고 하위 노드를 대상 요소에 하나씩 추가합니다. 반복하는 동안 우리는 지정된 요소의 내부 끝에 자식 노드를 추가하기 위해appendChild() 메서드를 사용합니다. 루프가 끝나면 div 요소의 모든 하위 노드가 대상 요소에 추가됩니다.

이 사용자 정의 Append() 메소드를 사용할 때 추가할 대상 요소와 HTML 코드 문자열을 전달하여 호출하기만 하면 되며, 내부 이벤트 및 오류에 대한 걱정 없이 지정된 요소에 콘텐츠를 추가하는 기능을 구현할 수 있습니다. 스타일 상실.

다음은 사용자 정의append() 메소드를 사용하는 예입니다. ID가 "myDiv"인 요소가 있고 여기에 h1 제목과 단락을 추가한다고 가정합니다.

var myDiv = document.getElementById('myDiv');
var html = '<h1>这是一个标题</h1><p>这是一个段落</p>';

append(myDiv, html);

위 코드는 <h1>这是一个标题</h1> <p>这是一个段落</p>를 추가합니다. ID가 "myDiv"인 요소 내부로 이동합니다.

기본 JavaScript를 사용하여 추가() 메서드를 구현하면 요소 내부의 이벤트 리스너와 스타일을 유지하면서 지정된 요소에 콘텐츠를 보다 유연하게 추가할 수 있습니다. 사용자 정의 방법을 통해 우리는 보다 제어 가능하고 효율적이며 안전한 DOM 작업을 달성할 수 있습니다.

위 내용은 네이티브 js는 Append() 메소드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!