将DIV元素转换为String

Question

当我点击“创建按钮”时，我想在页面上打印一个div元素。

因此，当我点击创建时，我会调用一个具有document.getElementById("createdDiv").textContent = document.querySelector("[data-feed]");

的函数

这会找到我的div元素并打印到页面[object HTMLDivElement]

然而，当我将元素打印到控制台时，我得到了我的div元素：

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

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

Answer 1

您可以使用outerHTML：

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

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了从任何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]"));

＆＃13;

＆＃13;

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]"));

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考文献：

• Element.outerHTML。