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

HTML 5는 <template>이 목적으로 사용할 수있는 요소를 도입했습니다 (현재 WhatWG 사양 및 MDN 문서에 설명되어 있음 ).

<template>소자 스크립트에서 사용될 수 HTML 단편을 선언하기 위해 사용된다. 요소는 템플릿의 컨텐츠에 대한 액세스를 제공하기 위해 DOM 에서 유형 HTMLTemplateElement의 .content특성 을 갖는 것으로 표시됩니다 DocumentFragment. 당신이 설정하여 DOM 요소에 HTML 문자열을 변환 할 수있는이 수단 innerHTML(A)의 <template>다음 요소에 도달 template의 .content속성입니다.

예 :

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

var td = htmlToElement('<td>foo</td>'),
    div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/**
 * @param {String} HTML representing any number of sibling elements
 * @return {NodeList}
 */
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

다른 컨테이너 요소div 를 사용하는 유사한 접근 방식은 작동하지 않습니다. HTML에는 어떤 요소 유형이 어떤 다른 요소 유형 내에 존재할 수 있는지에 대한 제한이 있습니다. 예를 들어을 td의 직계 자식으로 사용할 수 없습니다 div. innerHTMLa div를 포함 하도록 설정하면 이러한 요소가 사라집니다 . 이후 <template>의 해당 콘텐츠에 이런 제한이 없습니다 템플릿을 사용하는 경우, 이러한 단점이 적용되지 않습니다.

그러나 template일부 이전 브라우저에서는 지원되지 않습니다. 2018 년 1 월 기준으로 사용할 수 있습니까 … 전 세계 사용자의 90 %가 templates 를 지원하는 브라우저를 사용하고 있다고 추정 합니다 . 특히 어떤 버전의 Internet Explorer도 지원하지 않습니다. Microsoft는 templateEdge가 릴리스 될 때까지 지원을 구현하지 않았습니다 .

최신 브라우저 사용자만을 대상으로하는 코드를 작성하기에 운이 좋으면 지금 바로 사용하십시오. 그렇지 않으면 사용자가 따라 잡기까지 잠시 기다려야 할 수도 있습니다.

답변

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);