如何获取在Javascript中创建的元素的源代码？

问题描述：

我用Javascript创建了这个元素。如何获取在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。

JSON.stringify（divElem） – Observer

它只返回{} – Pezcraft

@Observer JSON.stringify（）对于非JavaScript对象不起作用。 –

答

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

MDN Element.outerHTML

答

您需要.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>

如何获取在Javascript中创建的元素的源代码？

相关推荐