將如何獲取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