javascript - 如何在 html 中创建模板或占位符并将它们动态添加到正文中？

Question

我想用 html 创建一个论坛。正如您所猜到的，我是网络开发新手。

假设有一个用户发布消息的模板:

<div id="message">
    <h3>#name of the user</h3>
    <p>#message</p>
</div>

我希望用用户名和消息填充此模板，然后在用户发布时将其动态添加到主体。

然而，正如我告诉过你的那样，我对网络开发还很陌生。我不知道该怎么做。我只需要你的指导方针和想法。也许给我指出适当的教程和引用资料。

Answer 1

您可以使用模板字面量，只需在模板中插入 name 和 msg。

let template  = document.querySelector('div#message');

function createMessage(name,msg){
  return (
    `<div id="message">
    <h3>${name}</h3>
    <p>${msg}</p>
    </div>`
  
  )
}


let data = [{
  name:"name 1",
  message:"message 1",
},

{
  name:"name 2",
  message:"message 3",
},
{
  name:"name 3",
  message:"message 3",
},

]


let str = data.map(x => createMessage(x.name,x.message)).join('');

document.body.insertAdjacentHTML("afterend",str)