如何获取用 Javascript 创建的元素的源代码？答案

【问题标题】：How to get the sourcecode of an element created in Javascript?如何获取用 Javascript 创建的元素的源代码？
【发布时间】：2017-10-16 19:37:42
【问题描述】：

我用 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 的元素。

【问题讨论】：

JSON.stringify(divElem)
它只是返回 {}
@Observer JSON.stringify() 不会帮助处理非 JavaScript 对象。
试试 divElem.outerHTML

标签： javascript console output element

【解决方案1】：

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

MDN Element.outerHTML

【讨论】：

【解决方案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;

&lt;div id="testDiv" class="meter"&gt;&lt;/div&gt;

【讨论】：