拷贝动态生成 HTML

在网站开发中，有时会遇到需要拷贝动态生成的 HTML 元素的情况。本文将介绍如何在 JavaScript 中利用 document.documentElement.innerHTML 属性来实现这一操作。

问题

请使用 JavaScript 拷贝以下 HTML 代码中动态生成的内容：

    
        <meta charset="utf-8"><title></title><script type="text/javascript" src="static/library/jquery/3.6.0/jquery.min.js"></script><div id="test">

        </div>

        <script type="text/javascript">
            const data = ["AAA", "BBB", "CCC"]
            data.forEach((el)=>{$("#test").append(`
                    <h1>${el}
                `)
            })
        </script>

答案

要拷贝动态生成的内容，可以使用 JavaScript 中的 document.documentElement.innerHTML 属性。该属性可以获取当前 HTML 文档的整个 HTML 内容，包括动态生成的元素。

const copiedHTML = document.documentElement.innerHTML;
console.log(copiedHTML);

输出结果：

    
        <meta charset="utf-8"><title></title><script type="text/javascript" src="static/library/jquery/3.6.0/jquery.min.js"></script><div id="test">
            <h1>AAA</h1>
            <h1>BBB</h1>
            <h1>CCC</h1>
        </div>

        <script type="text/javascript">
            const data = ["AAA", "BBB", "CCC"]
            data.forEach((el)=>{$("#test").append(`
                    <h1>${el}
                `)
            })
        </script>

通过 document.documentElement.innerHTML 属性，我们成功地拷贝了动态生成的 HTML 内容，包括三个

标签及其文本内容。

以上就是如何使用 JavaScript 拷贝动态生成的 HTML 内容？的详细内容，更多请关注其它相关文章！