将 HTML 字符串转换为 DOM 元素？

javascript dom html

2022-08-30 00:17:00

有没有办法转换HTML，例如：

<div>
<a href="#"></a>
<span></span>
</div>

或任何其他HTML字符串进入DOM元素？（这样我就可以使用 appendChild（））。我知道我可以做.innerHTML和.innerText，但这不是我想要的 - 我真的希望能够将动态HTML字符串转换为DOM元素，以便我可以在.appendChild（）中传递它。

更新：似乎存在混淆。我在字符串中包含HTML内容，作为JavaScript中变量的值。文档中没有 HTML 内容。

答案 1

您可以使用，如下所示：DOMParser

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

答案 2

通常创建一个临时父元素，可以向其中写入，然后提取内容：innerHTML

var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;

如果您拥有的outer-HTML元素像这里一样简单，那么这很容易。如果它可能是其他无法去任何地方的东西，你可能会遇到更多问题。例如，如果它是一个，则必须使父包装器是 .<div><li><ul>

但是IE不能写在元素上，所以如果你有一个，你必须把整个HTML字符串包装进去......，把它写进去，然后从几个级别上解脱出你想要的实际内容。innerHTML<tr><td><table><tbody><tr></tr></tbody></table>innerHTML<td>