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

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

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

当前回答

无需任何调整，您获得了一个本地API：

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

2017-02-24 21:48:41

其他回答

最新JS示例：

<template id="woof-sd-feature-box">
<div class="woof-sd-feature-box" data-key="__KEY__" data-title="__TITLE__" data-data="__OPTIONS__">
    <h4>__TITLE__</h4>
    <div class="woof-sd-form-item-anchor">
        <img src="img/move.png" alt="">
    </div>
</div>

</template>

<script>
create(example_object) {
        let html = document.getElementById('woof-sd-feature-box').innerHTML;
        html = html.replaceAll('__KEY__', example_object.dataset.key);
        html = html.replaceAll('__TITLE__', example_object.dataset.title);
        html = html.replaceAll('__OPTIONS__', example_object.dataset.data);
        //convertion HTML to DOM element and prepending it into another element
        const dom = (new DOMParser()).parseFromString(html, "text/html");
        this.container.prepend(dom.querySelector('.woof-sd-feature-box'));
    }
</script>

2022-01-21 14:57:47

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没有实施模板支持。

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

2016-02-13 21:25:59

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

使用jnerator

2012-09-25 00:39:23

答复

创建模板将模板的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

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

推荐文章

最新文章

标签