내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성

질문 : 내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성

---

요소를 나타내는 HTML 문자열이 있습니다 : '<li>text</li>' . DOM의 요소 (제 경우 ul 프로토 타입이나 DOM 메소드로 어떻게 할 수 있습니까?

(나는 jQuery에서 쉽게 할 수 있다는 것을 알고 있지만 불행히도 jQuery를 사용하지 않습니다.)

답변

---

참고 : 대부분의 최신 브라우저는 HTML <template> 요소를 지원하므로 문자열에서 요소를 만드는보다 안정적인 방법을 제공합니다. 자세한 내용은 아래 Mark Amery의 답변을 참조하십시오 .

이전 브라우저 및 node / jsdom <template> 요소를 지원하지 않음)의 경우 다음 방법을 사용하십시오. HTML 문자열에서 DOM 요소를 가져 오기 위해 라이브러리가 사용하는 것과 동일한 innerHTML 구현으로 버그를 해결 하기위한 추가 작업 포함 ).

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

HTML 템플릿과 달리 <td> 와 같이 <div> 자식이 될 수없는 일부 요소 에서는 작동하지 않습니다.

이미 라이브러리를 사용하고 있다면 HTML 문자열에서 요소를 만드는 라이브러리 승인 방법을 따르는 것이 좋습니다.

• update() 메서드 에이 기능이 내장되어 있습니다.
• jQuery는 jQuery(html) 및 jQuery.parseHTML 메서드에 구현되어 있습니다.

출처 : https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro