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

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


当前回答

参观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;
}

其他回答

无需任何调整,您获得了一个本地API:

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

这也会奏效:

$('<li>').text('hello').appendTo('#mylist');

它感觉更像是一种带有链式函数调用的jquery方式。

参观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;
}

这里有一个简单的方法:

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);

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

document.createRange().createContextualFragment()

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

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