如何将字符串中的 html 呈现为 html

Question

所以我有这个字符串：

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

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

所以 DOM 将包含：

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

Answer 1

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

Answer 2

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

Answer 3

试试这个 ^_^ :

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>

Answer 4

我发现 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>

Answer 5

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

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

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

Answer 6

使用document.createElement创建childNode。 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

如何将字符串中的 html 呈现为 html

How would get html in a string to render as html

html

javascript

escaping