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>

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

2 个答案: