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

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

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

当前回答

为什么不使用原生js？

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=r.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

2020-05-22 19:51:40

其他回答

可以使用以下方法从字符串创建有效的DOM节点：

document.createRange（）.createContextualFragment（）

以下示例在页面中添加一个按钮元素，从字符串中获取标记：

让html='<button type=“button”>单击我</按钮>'；let fragmentFromString=函数（strHTML）{return document.createRange（）.createContextualFragment（strHTML）；}let fragment=fragmentFromString（html）；document.body.appendChild（片段）；

2017-02-28 14:31:14

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

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

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

2016-02-08 10:59:21

这里有一个简单的方法：

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

2013-05-03 00:02:50

这是我的工作代码

我想将“文本”字符串转换为HTML元素

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;

2018-01-08 10:23:19

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

推荐文章

最新文章

标签