将如何获取HTML字符串中呈现为html

Question

所以我有这个字符串：

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

如果我对DOM一个div中，我如何能够使字符串到div元素一个真正的头？

因此，DOM将包含：

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

Answer 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>

Answer 2

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

Answer 3

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