将DIV元素转换为字符串

Question

将DIV元素转换为字符串

4

我有一个div元素，我想在点击“创建”按钮后将其打印在页面上。

因此，当我点击创建时，我调用一个函数，其中包含：document.getElementById("createdDiv").textContent = document.querySelector("[data-feed]"); 这会找到我的div元素并打印到页面上，但结果会显示为[object HTMLDivElement]。

然而，当我把该元素打印到控制台时，可以看到我的div元素：

<div data-feed class="feed-element" ... ></div>

我知道控制台有一个toString函数，可以将div元素转换为字符串，但我不确定如何在JavaScript中执行此操作，以便可以将相同的字符串打印到页面上。有什么建议吗？

- cching

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

您可以使用outerHTML：

document.getElementById("createdDiv").textContent = document.querySelector("[data-feed]").outerHTML;

document.getElementById("createdDiv").textContent = document.querySelector("[data-feed]").outerHTML;

[data-feed]::before {
  content: 'The source element: ';
  color: #f00;
}

#createdDiv {
  white-space: pre-wrap;
  border: 1px solid #000;
  padding: 0.5em;
  border-radius: 1em;
}

<div data-feed="something"><span>Text in here</span> with <em>various</em> <strong>elements</strong></div>
<div id="createdDiv"></div>

为了从任何childNodes中删除HTML，您可以使用一个函数来克隆节点，删除子节点，然后仅返回该特定节点的outerHTML：

function tagHTMLOnly(elem) {
  var temp = elem.cloneNode();
  while (temp.firstChild) {
    temp.removeChild(temp.firstChild);
  }
  return temp.outerHTML;
}

document.getElementById("createdDiv").textContent = tagHTMLOnly(document.querySelector("[data-feed]"));

function tagHTMLOnly(elem) {
  var temp = elem.cloneNode();
  while (temp.firstChild) {
    temp.removeChild(temp.firstChild);
  }
  return temp.outerHTML;
}

document.getElementById("createdDiv").textContent = tagHTMLOnly(document.querySelector("[data-feed]"));

[data-feed]::before {
  content: 'The source element: ';
  color: #f00;
}
#createdDiv {
  white-space: pre-wrap;
  border: 1px solid #000;
  padding: 0.5em;
  border-radius: 1em;
}

<div data-feed="something"><span>Text in here</span> with <em>various</em>  <strong>elements</strong>
</div>
<div id="createdDiv"></div>

参考资料：

Element.outerHTML。