迟到了，但只是一个音符；

可以将一个简单的元素作为容器添加到目标元素中，并在使用后将其删除。

//测试铬23.0，萤火虫18.0，即7-8-9和歌剧12.11。

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

对于某些html片段，如<td>test</td>、div.innerHTML、DOMParser.parseFromString和range.createContextualFragment（没有正确的上下文），此处其他答案中提到的解决方案不会创建<td>元素。

jQuery.parseHTML（）正确处理它们（我将jQuery2的parseHTML函数提取为一个独立函数，可以在非jQuery代码库中使用）。

如果您只支持Edge 13+，那么只使用HTML5模板标记会更简单：

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

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

我添加了一个Document原型，它从字符串创建一个元素：

Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str, 'text/html');
   const child = element.documentElement.querySelector('body').firstChild;
   return child;
};

用法：

document.createElementFromString("<h1>Hello World!</h1>");

var msg=“测试”jQuery.parseHTML（消息）

var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

使用jnerator

HTML5引入了可用于此目的的＜template＞元素（如现在在WhatWG规范和MDN文档中所描述的）。

＜template＞元素用于声明可在脚本中使用的HTML片段。元素在DOM中表示为HTMLTemplateElement，该元素具有DocumentFragment类型的.content属性，以提供对模板内容的访问。这意味着您可以通过设置＜template＞元素的innerHTML，然后到达模板的.content属性，将HTML字符串转换为DOM元素。

示例：

/**
 * @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的直接子级。如果试图将div的innerHTML设置为包含这些元素，这会导致这些元素消失。由于＜template＞对其内容没有这样的限制，因此在使用模板时不适用此缺点。

然而，一些旧浏览器不支持模板。截至2021 4月，我可以使用……吗。。。据估计，全球96%的用户正在使用支持模板的浏览器。特别是，没有版本的Internet Explorer支持它们；在Edge发布之前，Microsoft没有实施模板支持。

如果你有幸编写了只针对现代浏览器用户的代码，那么现在就开始使用吧。否则，您可能需要等待一段时间才能让用户跟上。