使用HTML template模板时如何保留CSS样式？我的实现仅显示无格式文本

你的问题出在直接给模板克隆的DocumentFragment设置textContent，这会覆盖掉模板里原本的.message容器和<p>标签结构，只剩下纯文本，自然无法应用你写的CSS样式。

修改后的JS代码 #

document.addEventListener("DOMContentLoaded", ()=> {
    let button = document.getElementById("send_button");
    let template = document.getElementById("template_message");
    let screen = document.getElementById("screen");
    let message_text = document.getElementById("message_text");

    button.addEventListener("click", () => {
        let template_clone = template.content.cloneNode(true);
        // 找到克隆结构里的p标签，把输入值赋值给它
        template_clone.querySelector('p').textContent = message_text.value;
        screen.appendChild(template_clone);
        // 可选：清空输入框，提升交互体验
        message_text.value = '';
    })
})

说明 #

模板克隆出来的template_clone是一个DocumentFragment，里面包含了你定义的.message div和<p>标签。通过querySelector('p')定位到具体的文本容器，再设置它的内容，就能完整保留原本的DOM结构，CSS样式也就可以正常作用在.message和<p>上了。

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