我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?

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


当前回答

解决方案-适用于自IE 4.0以来的所有浏览器

var htmlString = `<body><header class="text-1">Hello World</header><div id="table"><!--TABLE HERE--></div></body>`;
var tableString = `<table class="table"><thead><tr><th>th cell</th></tr></thead><tbody><tr><td>td cell</td></tr></tbody></table>`;


var doc = document.implementation.createHTMLDocument();
    doc.open();
    doc.write(htmlString);
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);
    doc.close();

console.log(doc);

或者你可以使用DOMParser

var doc = (new DOMParser).parseFromString(htmlString, "text/html");
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);

console.log(doc);

其他回答

使用insertAdjacentHTML()。它适用于所有当前浏览器,即使是IE11。

var mylist=文档.getElementById('mylist');mylist.insertAdjacentHTML('beforeend','<li>third</li>');<ul id=“mylist”><li>第一个</li><li>第二个</li></ul>

我从这篇文章中得到了链接。(是否将HTML字符串转换为DOM元素?)

对我来说,我想找到一种将字符串转换为HTML元素的方法。如果您也有此需求,可以尝试以下方法

constfrag=document.createRange().createContextualFragment(`<a href=“/link.js”>js</a><a>去</a>`) constaCollection=frag.querySelectorAll(“a”)for(let[key,a]of Object.entries(aCollection)){console.log(a.getAttribute(“href”),a.textContent)}

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

对于较旧的浏览器和node/jsdom:(在编写时还不支持<template>元素),请使用以下方法。这与库用来从HTML字符串中获取DOM元素的方法相同(IE需要额外的工作来解决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模板不同,这对于某些不能合法成为<div>的子元素的元素(如<td>s)不起作用。

如果您已经在使用一个库,我建议您坚持使用库批准的方法,从HTML字符串创建元素:

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

无需任何调整,您获得了一个本地API:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

使用jnerator