js转html

作者：一脸帅气发布日期:2025-09-19 浏览:31

<!DOCTYPE html>
<html>
<head>
    <title>JS 转 HTML 示例</title>
</head>
<body>
    <div id="content"></div>

    <script>
        // JavaScript 代码，用于生成 HTML 内容
        function generateHTML() {
            // 创建一个 HTML 字符串
            let htmlContent = `
                <h1>欢迎来到我的网页</h1>
                <p>这是一个通过 JavaScript 动态生成的 HTML 页面。</p>
                <ul>
                    <li>列表项 1</li>
                    <li>列表项 2</li>
                    <li>列表项 3</li>
                </ul>
            `;

            // 将生成的 HTML 内容插入到页面中的 div 元素中
            document.getElementById('content').innerHTML = htmlContent;
        }

        // 调用函数，生成并显示 HTML 内容
        generateHTML();
    </script>
</body>
</html>

解释说明：

HTML 结构：页面包含一个 <div> 元素，其 id 为 content，用于存放动态生成的 HTML 内容。
JavaScript 代码：generateHTML 函数创建了一个包含标题、段落和无序列表的 HTML 字符串，并将其插入到页面的 div 中。
动态生成内容：通过 document.getElementById('content').innerHTML 方法，将生成的 HTML 字符串插入到指定的 DOM 元素中，从而实现从 JavaScript 到 HTML 的转换。

上一篇：html css js三者之间的关系

下一篇：html js css