追加動態生成到現有元件中的html

我有一個html元素使用JavaScript生成的div元素：追加動態生成到現有元件中的html

var iDiv = document.createElement('div'); 
iDiv.id = 'block'; 
iDiv.className = 'block'; 
document.getElementsByTagName('body')[0].appendChild(iDiv); 

iDiv.innerHTML = "I'm the first div";

現在我已經創建了返回我的「DIV」元件到第一方法div元素（id="block"）。我只是接收函數的輸出（returnDiv（）），我沒有控制來改變方法內的任何東西。輸出如下：

// returnDiv() returns me the following output which I am collecting in innerDiv variable 

var innerDiv = <div style="width: 30px;"><div class="pBar" style="width: 100%;"><span title="100.00%" class="l r" style="background: red; left: 1px; width: 30px; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span><span title="0.00%" class=" r" style="background: rgb(255, 194, 0); left: 31px; width: 0px; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span></div></div>; 

//document.createElement('div'); 

//innerDiv.className = 'block-2'; 

// The variable iDiv is still good... Just append to it. 

iDiv.appendChild(innerDiv); 
innerDiv.innerHTML = "I'm the inner div";

這裏的小提琴鏈接： https://jsfiddle.net/1988/5ff8dqbb/

的問題是內部事業部是不可見的，並且錯誤說「遺漏的類型錯誤：未能執行‘的appendChild’上'節點。'：參數1的類型不是‘節點’ 「既然是運行時我不能夠做出來什麼問題

來源

2017-06-14 user1400915

更好的解決方案：

var parser = new DOMParser() 
var el = parser.parseFromString(innerDiv, "text/xml"); 
iDiv.appendChild(el.firstElementChild)

舊的解決方案：

你不能用這種方式追加inerDiv到IDIV。您就可以向該這樣的：變化

`iDiv.appendChild(innerDiv);`

到

`iDiv.innerHTML += innerDiv`

來源

2017-06-14 11:24:35 guest

追加動態生成到現有元件中的html

回答

相關問題