如何獲取在Javascript中創建的元素的源代碼？

Question

我用Javascript創建了這個元素。

var divElem = document.createElement("div"); 
divElem.setAttribute("id", "testedMeter"); 
divElem.setAttribute("class", "meter"); 
document.getElementById('testDiv').appendChild(divElem); 
console.log(divElem); 

當我用console.log輸出到控制檯時，我得到了這個元素的源代碼。

<div id="testedMeter" class="meter"></div> 

當我輸出divElem到一個div它只是說[object HTMLDivElement]。 我的問題是，我如何輸出divElem的源代碼到div，textarea或其他東西，以便我可以複製源代碼？我需要這個，因爲我用不同的id創建了這些元素的thousend。

Answer 1

你可以使用textarea.value = divElem.outerHTML

MDN Element.outerHTML

Answer 2

您需要.innerHTML提取元素的HTML作爲字符串：

var divElem = document.createElement("div"); 
 
divElem.setAttribute("id", "testedMeter"); 
 
divElem.setAttribute("class", "meter"); 
 

 
// First, append the element as you did before: 
 
document.getElementById('testDiv').appendChild(divElem); 
 

 
// Now, you can pull out that child element's HTML with .innerHTML and put that 
 
// string anywhere you like: 
 
document.getElementById('testDiv').textContent = document.getElementById('testDiv').innerHTML;

<div id="testDiv" class="meter"></div>