使用内置DOM方法或原型从HTML字符串创建新的DOM元素

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

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

当前回答

我正在使用这个方法（在IE9+中有效），虽然它不会解析＜td＞或其他一些无效的直接子体：

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

2016-06-08 12:39:02

其他回答

参观https://www.codegrepper.com/code-examples/javascript/convert+a+字符串+to+html+元素+in+js

const stringToHtml = function (str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
}

2022-03-03 16:11:53

答复

创建模板将模板的innerHTML设置为strim.trim（）创建模板的子级数组返回子项、子项或

函数toElement（s=“”，c，t=document.createElement（'template'），l='length'）{t.innerHTML=s.trim（）；c=[…t.content.childNodes]；返回c[l]>1？c： c[0]| |“”；｝console.log（toElement（））；console.log（toElement（“”））；console.log（toElement（“”））；console.log（toElement（'<td>With td</td>'））；console.log（toElement（'<tr><td>With t</td></tr>'））；console.log（toElement（'<tr><td>foo</td></tr><tr><td>bar</td></tr>'））；console.log（toElement（'<div><span><span>嵌套</span><span>填充</span></div>'））；

2020-07-12 22:02:35

我自己找了很多，找到了一个很好的解决方案。

const stringToHTML = (str) => {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};

要转换的字符串：

'<iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Total Body Balance"></iframe>'

结果：

<body><iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="Total Body Balance"></iframe></body>

2021-10-06 11:38:46

您可以使用以下函数将文本“HTML”转换为元素

函数htmlToElement（html）{var element=document.createElement（'div'）；element.innerHTML=html；返回（元素）；}var html=“<li>text和html</li>”；var e=htmlToElement（html）；

2017-07-11 06:05:22

我从这篇文章中得到了链接。（是否将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）}

2021-04-26 09:41:44

使用内置DOM方法或原型从HTML字符串创建新的DOM元素

推荐文章

最新文章

标签