javascript - 将 DIV 元素转换为字符串

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;

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>

为了从任何子节点中删除 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 .