如何使用 JavaScript 拷贝动态生成的 HTML 内容？-html教程-PHP中文网

如何使用 JavaScript 拷贝动态生成的 HTML 内容？

霞舞

发布： 2024-10-24 10:45:01

转载

693人浏览过

如何使用 javascript 拷贝动态生成的 html 内容？

拷贝动态生成 HTML

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

问题

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

立即学习“Java免费学习笔记（深入）”；

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

查看详情

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

        </div>

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

登录后复制

答案

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

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

登录后复制

输出结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="static/library/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <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}</h1>
                `)
            })
        </script>
    </body>
</html>

登录后复制

通过 document.documentElement.innerHTML 属性，我们成功地拷贝了动态生成的 HTML 内容，包括三个 <h1> 标签及其文本内容。

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