我有一个表示元素的 HTML 字符串：.我想将其附加到 DOM 中的一个元素（在我的情况下为 a）。如何使用原型或 DOM 方法执行此操作？'<li>text</li>'ul

（我知道我可以在jQuery中轻松做到这一点，但不幸的是我们没有使用jQuery。

网友回答：

注意：大多数当前浏览器都支持 HTML 元素，这提供了一种更可靠的方法来从字符串创建元素。有关详细信息，请参阅下面的马克·阿默里的回答。<template>

对于较旧的浏览器和 node/jsdom：（在撰写本文时尚不支持元素），请使用以下方法。这与库用来从 HTML 字符串中获取 DOM 元素所做的相同（IE 需要一些额外的工作来解决其实现的错误）：<template>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 模板不同，这不适用于某些在法律上不能是 的子元素，例如 s。<div><td>

如果你已经在使用库，我建议你坚持使用库认可的从HTML字符串创建元素的方法：

• 原型在其方法中内置了此功能。update()
• jQuery在其和方法中实现了它。jQuery(html)jQuery.parseHTML

网友回答：

HTML 5引入了可用于此目的的元素（如WhatWG规范和MDN文档中的描述）。<template>

元素用于声明可在脚本中使用的 HTML 片段。该元素在 DOM 中表示为 具有类型属性的 ，以提供对模板内容的访问。这意味着您可以通过设置 的 元素，然后进入 的 属性，将 HTML 字符串转换为 DOM 元素。<template>HTMLTemplateElement.contentDocumentFragmentinnerHTML<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>');

请注意，使用不同容器元素（如 ）的类似方法不太有效。HTML 对允许哪些元素类型存在于哪些其他元素类型中具有限制;例如，不能将 A 作为 的直接子级。这会导致这些元素消失，如果您尝试设置 of a 以包含它们。由于 s 对其内容没有此类限制，因此在使用模板时不适用此缺点。divtddivinnerHTMLdiv<template>

但是，在某些旧浏览器中不受支持。截至 2021 年 96 月，我可以使用… 估计全球 <>% 的用户正在使用支持 s 的浏览器。特别是，没有版本的 Internet Explorer 支持它们;微软直到Edge发布才实现支持。templatetemplatetemplate

如果您有幸编写的代码仅针对现代浏览器的用户，请立即使用它们。否则，您可能需要等待一段时间才能让用户赶上。

网友回答：

使用 insertAdjacentHTML（）。它适用于所有当前的浏览器，甚至适用于 IE11。

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

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