如何在字符串中获取 html 以呈现为 html答案

【问题标题】：How would get html in a string to render as html如何在字符串中获取 html 以呈现为 html
【发布时间】：2016-05-21 18:39:00
【问题描述】：

所以我有这个字符串：

var textToBeRendered='<h1>I am a string of text</h1>';

如果我在 DOM 上有一个 div，我如何能够将字符串呈现给 div 元素作为实际的标题？

所以 DOM 将包含：

<div>
   <h1>I am a string of text</h1>
</div>

【问题讨论】：

Add/remove HTML inside div using JavaScript的可能重复

标签： javascript html escaping

【解决方案1】：

试试这个^_^：

var textToBeRendered='<h1>I am a string of text</h1>';
document.getElementById("demo").innerHTML = textToBeRendered

<div id="demo">
   <h1>I am a string of text</h1>
</div>

【讨论】：

这就是我想要的。我只是放了一个非常糟糕的大脑放屁；我应该想到这一点的。感谢您的帮助！

【解决方案2】：

使用document.createElement 创建子节点。 textContent 将文本放入新创建的元素中。然后使用appendChild 追加父项

HTML

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

JS

var textToBeRendered= document.createElement('h1');
textToBeRendered.textContent = "I am a string of text";
document.getElementById('somId').appendChild(textToBeRendered);

EXAMPLE

【讨论】：

【解决方案3】：

如果你考虑使用 jQuery，你可以使用jQuery.parseHTML()

【讨论】：

【解决方案4】：

var textToBeRendered='<h1>I am a string of text</h1>';
var div = document.createElement("div");
div.innerHTML = textToBeRendered;
document.body.appendChild(div);

【讨论】：

【解决方案5】：

你可以使用 JQUERY 来做到这一点，下面的代码会帮助你

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

<script>
     $("myHeader").html("<h1>I am a string of text</h1>")
</script>

【讨论】：

【解决方案6】：

我发现insertAdjacentHTML 是最灵活的。第一个参数是它应该相对于它被调用的元素插入的位置。第二个参数是字符串。你甚至可以像这样使用它。 div.insertAdjacentHTML('afterbegin', '<h1>I am a string of text</h1>');

    (function(div) {
      var textToBeRendered = '<h1>I am a string of text</h1>';
      div.insertAdjacentHTML('afterbegin', textToBeRendered);
    }(document.querySelector('div')));

<div>
</div>

【讨论】：