JavaScript新手开发求助：如何为用户输入内容包裹HTML标签生成可用HTML模板

嘿，我看了你写的代码，能理解你想做一个自动生成HTML模板的工具的需求——把用户输入的内容套进对应的HTML标签里，还能让代码整齐垂直显示对吧？咱们来一步步解决你的问题：

先说说你当前代码里的几个核心问题 #

• 你用了<input type="textarea">，这是错误的写法！正确的多行输入框应该用<textarea>标签，input没有textarea这个type值
• createTextNode会把所有内容当成纯文本，所以你拼的<p>这些标签会被当成普通文字显示，没法实现“用标签包裹内容”的效果（如果是要生成可复制的模板代码，反而需要让标签以文本形式呈现，这里你之前的逻辑有点混淆）
• document.write这类方法容易破坏现有页面结构，而且你用的document.writeIn是拼写错误，应该是document.writeln，但这个方法现在已经不推荐用在交互场景里了
• 你的代码逻辑比较零散，没有把输入内容和HTML标签做完整的结构化拼接

给你一套重构后的解决方案 #

我会帮你实现：用户输入标题、副标题、正文后，点击按钮生成完整的HTML模板代码，整齐垂直显示，还能一键复制。

第一步：修正HTML结构+完整功能代码

把错误的输入框换成<textarea>，添加专门显示生成代码的区域，同时完善JavaScript逻辑：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="utf-8"/>
    <style>
        textarea {
            width: 300px;
            height: 80px;
            margin-left: 10px;
            margin-top: 5px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        #generated-code {
            background: #f5f5f5;
            padding: 15px;
            margin-top: 20px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label>标题（h1标签包裹）：</label>
        <textarea id="top_field" placeholder="输入标题内容"></textarea>
    </div>
    <div class="input-group">
        <label>职位/提案（h2标签包裹）：</label>
        <textarea id="subtitle_field" placeholder="输入副标题内容"></textarea>
    </div>
    <div class="input-group">
        <label>正文（p标签包裹）：</label>
        <textarea id="field1" placeholder="输入正文内容"></textarea>
    </div>
    <button id="sub_button" type="button" onclick="myFunction()">生成并复制HTML模板</button>
    <pre id="generated-code"></pre>

    <script>
        function myFunction() {
            // 获取用户输入并去除首尾空格
            const title = document.getElementById("top_field").value.trim();
            const subtitle = document.getElementById("subtitle_field").value.trim();
            const bodyText = document.getElementById("field1").value.trim();

            // 校验输入
            if (!title && !subtitle && !bodyText) {
                document.getElementById("generated-code").textContent = "请输入至少一项内容再生成模板！";
                return;
            }

            // 用模板字符串拼接完整HTML代码，自动保留换行格式
            let htmlTemplate = `<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="utf-8"/>
</head>
<body>`;

            // 根据输入内容添加对应标签
            if (title) {
                htmlTemplate += `
    <h1>${title}</h1>`;
            }
            if (subtitle) {
                htmlTemplate += `
    <h2>${subtitle}</h2>`;
            }
            if (bodyText) {
                htmlTemplate += `
    <p>${bodyText}</p>`;
            }

            // 闭合HTML标签
            htmlTemplate += `
</body>
</html>`;

            // 在页面显示生成的代码（textContent确保标签以文本形式呈现）
            const codeDisplay = document.getElementById("generated-code");
            codeDisplay.textContent = htmlTemplate;

            // 自动复制代码到剪贴板
            navigator.clipboard.writeText(htmlTemplate).then(() => {
                alert("HTML模板已复制到剪贴板！");
            }).catch(err => {
                console.error("复制失败：", err);
                alert("复制失败，请手动复制代码");
            });
        }
    </script>
</body>
</html>

关键知识点解释

• 正确使用<textarea>：input标签没有textarea类型，textarea是独立的多行输入标签，更适合用户输入长文本
• 模板字符串拼接：用ES6的模板字符串（`包裹）可以轻松实现多行代码拼接，让生成的HTML结构清晰，自动保留换行
• <pre>标签显示代码：pre标签会保留文本的换行和空格，加上font-family: monospace可以让代码显示更规整，white-space: pre-wrap避免代码过长横向滚动
• textContent渲染代码：用textContent而不是innerHTML，确保浏览器把所有内容当成纯文本显示，不会解析HTML标签，用户看到的就是可直接复制的模板代码
• 现代剪贴板API：navigator.clipboard.writeText是目前推荐的剪贴板操作方法，比旧的document.execCommand('copy')更稳定可靠

额外提示 #

如果你想扩展功能，比如支持更多HTML标签（如列表、链接），只需要在拼接模板字符串的逻辑里，添加对应的输入框和标签拼接代码即可。

内容的提问来源于stack exchange，提问作者KinGuiin