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

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

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

当前回答

这是我的代码，它有效：

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

2011-05-21 07:40:44

其他回答

迟到了，但只是一个音符；

可以将一个简单的元素作为容器添加到目标元素中，并在使用后将其删除。

//测试铬23.0，萤火虫18.0，即7-8-9和歌剧12.11。

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

2012-12-13 12:39:13

从字符串渲染DOM的最快解决方案：

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

在这里，您可以检查DOM操作React与原生JS的性能

现在您可以简单地使用：

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

当然，在不久的将来，您将使用来自内存的引用，因为var“element”是您在文档中新创建的DOM。

记住“innerHTML=”非常慢：/

2020-01-16 12:18:20

实际上，我想我会分享我想出的这个过于复杂但又简单的方法。。。也许有人会发现有用的东西。

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

2013-09-21 03:47:51

HTML5和ES6

<模板>

Demo

“使用严格”；/****@作者xgqfrms*@许可证MIT*@版权xgqfrms*@description HTML5模板*@扩增*@示例**//*<模板><h2>鲜花</h2><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><模板><div class=“myClass”>我喜欢：</div></template>*/常量showContent=（）=>{//let temp=document.getElementsByTagName（“template”）[0]，let temp=document.querySelector（`[data tempalte=“tempalte img”]`），clone=临时内容克隆节点（true）；document.body.appendChild（克隆）；};const templateGenerator=（datas=[]，debug=false）=>{让result=``；//let temp=document.getElementsByTagName（“template”）[1]，let temp=document.querySelector（`[data tempalte=“tempalte links”]`），item=temp.content.querySelector（“div”）；for（设i=0；i<data.length；i++）{let a=document.importNode（item，true）；a.textContent+=数据[i]；document.body.appendChild（a）；}返回结果；};const arr=[“奥迪”、“宝马”、“福特”、“本田”、“捷豹”、“日产”]；if（document.createElement（“template”）.content）{console.log（“是！浏览器支持模板元素”）；模板生成器（arr）；setTimeout（（）=>{showContent（）；}, 0);}其他{console.error（“否！浏览器不支持模板元素”）；}@字符集“UTf-8”；/*测试.css*/：根目录{--颜色：#000；--默认cololr:#fff；--新的cololr:#0f0；}[数据class=“links”]{颜色：白色；背景色：道奇蓝；填充：20px；文本对齐：居中；边距：10px；}<!DOCTYPE html><html lang=“zh-Hans”><head><meta charset=“UTF-8”><meta name=“viewport”content=“width=设备宽度，初始比例=1.0”><meta http equiv=“X-UA-Compatible”content=“ie=edge”><title>模板测试</title></head><body><章节><h1>模板测试</h1></section><template data tempalte=“tempalte img”><h3>花卉图像</h3><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><template data tempalte=“tempalte links”><h3>链接</h3>我喜欢：</div></template></body></html>

2018-05-28 11:45:50

我添加了一个Document原型，它从字符串创建一个元素：

Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str, 'text/html');
   const child = element.documentElement.querySelector('body').firstChild;
   return child;
};

用法：

document.createElementFromString("<h1>Hello World!</h1>");

2017-08-20 17:24:20

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

推荐文章

最新文章

标签