如何使用模板又不失风格

Question

我有一个带有“screen”id 的 div 块、一个带有“message_text”id 的文本输入字段，以及带有 css 消息设计的模板。

模板html代码：

<template class="template_message" id="template_message">
      <div class="message">
            <p></p>
      </div>
</template>

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);

        template_clone.textContent = message_text.value;

        screen.appendChild(template_clone);

    })
})

我正在尝试输出“message_text”字段的值。我刚刚得到的是没有任何 css 格式的文本

Answer 1

你的问题是

.textContent

设置了整个模板的文本内容，即html来自

  <div class="message">
    <p></p>
  </div>

只是

message_text

相反，您需要找到

.message > p

元素并更改该元素的文本内容：

template_clone.querySelector(".message > p").textContent = message_text.value;

所以 html 就变成了

  <div class="message">
      <p>message_text</p>
  </div>

演示两者的示例片段：

let output1 = document.getElementById("output1");
let output2 = document.getElementById("output2");
let template = document.getElementById("template_message");

let clone1 = template.content.cloneNode(true);
// Replace entire template content
clone1.textContent = "New Message 1";
output1.appendChild(clone1, true);

let clone2 = template.content.cloneNode(true);
// Set just the message content
clone2.querySelector(".message > p").textContent = "New Message 2";
output2.appendChild(clone2);

.message { border:1px solid rebeccapurple; }
p { padding:0 0 0 3em; }

<template class="template_message" id="template_message">
      <div class="message">
            <p></p>
      </div>
</template>

<hr/>
<div id="output1"></div>
<hr/>
<div id="output2"></div>
<hr/>