在前端开发过程中，我们经常需要在 JavaScript 中操作 DOM 元素。有时我们需要将一个 HTML 元素转换为字符串，比如将一个 <div> 元素插入到另一个元素中。本文将介绍如何在 JavaScript 中将一个 HTML 元素转换为字符串。
使用 outerHTML 属性
HTML 元素有一个 outerHTML 属性，它可以返回一个表示整个元素及其内容的字符串。这个属性包含了元素的开始标签、结束标签和所有子元素。我们可以直接访问该属性并获取 HTML 字符串。
const element = document.createElement('div');
element.innerHTML = '<p>Hello, world!</p>';
const htmlString = element.outerHTML;
console.log(htmlString); // "<div><p>Hello, world!</p></div>"在上面的示例代码中，我们创建了一个 <div> 元素并设置了其 innerHTML 属性为一个包含一个段落元素的字符串。然后我们访问了该元素的 outerHTML 属性并将结果存储在变量 htmlString 中。最后，我们将结果输出到控制台中。
使用 outerHTML 属性的好处是，它可以将整个元素及其内容转换为字符串，而不仅仅是元素内部的 HTML 内容。但是要注意，当我们访问一个元素的 outerHTML 属性时，它会被从 DOM 树中移除。因此，如果我们需要在之后继续操作该元素，则需要重新将其插入到 DOM 树中。
使用 innerHTML 属性
另一种将 HTML 元素转换为字符串的方法是使用 innerHTML 属性。这个属性可以返回一个表示元素内部 HTML 内容的字符串。由于它只包含元素内部的内容，所以它不会包含开始标签和结束标签。
const element = document.createElement('div');
element.innerHTML = '<p>Hello, world!</p>';
const htmlString = element.innerHTML;
console.log(htmlString); // "<p>Hello, world!</p>"在上面的示例代码中，我们创建了一个 <div> 元素并设置了其 innerHTML 属性为一个包含一个段落元素的字符串。然后我们访问了该元素的 innerHTML 属性并将结果存储在变量 htmlString 中。最后，我们将结果输出到控制台中。
使用 innerHTML 属性的好处是，它可以方便地获取元素内部的 HTML 内容，并且不会从 DOM 树中移除元素。但是要注意，由于它不包含元素的开始标签和结束标签，因此在某些情况下可能需要手动添加这些标签。
示例代码
下面是一个完整的示例代码，演示如何将一个 HTML 元素转换为字符串并将其插入到另一个元素中：
<div id="container1"></div> <div id="container2"></div>
-- -------------------- ---- ------- ----- ------- - ------------------------------ ----------------- - ---------- ------------ -- -- --------- ---- ---- --- ----- ----------- - ------------------ -- -- --------- ---- ---- ----- ----- ----------- - ------------------ -- - ---- ------------ ----------------------------------------------- - ------------ -- -- ------------- - ----------- ------------- ----- ---------- - ------------------------------ -------------------- - ------------ --------------------------------------------------------------
在上面的示例代码中，我们首先创建了两个空的 <div> 元素，并将它们分别赋予了 id="container1" 和 id="container2"。然后我们创建了一个包含一个段落元素的 <div> 元素，并使用 `outerHTML
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14484
