Javascript 在单击时动态更改页面内容

我在使用与express framwork应用程序一起使用的Pug模板时遇到问题。我目前在

index.js

文件中有一个JSON文档列表。当我呈现模板时，我将其作为

messageList

发送。我要使用的UI类似于普通的电子邮件GUI，主题显示在LHS上，单击它会在页面中心打开消息/电子邮件

每个JSON都有一个主题和消息字段作为字符串。我目前正在对

messageList

中的每个

条目进行迭代/循环，并将每个主题显示为
按钮的内部文本。我的思考过程是，我想使用
onclick（）
发送
message
中的条目，以显示在我的
readMessage
div中

这是代码

Index.js



app.get("/dashboard", (req, res) => {
  Message.find( {}, function(err, data){ //data is my json doc list
     if(err)  
      return console.error(err);
     res.render("dashboard.pug", {messageList: data})
   })
});
Javascript代码看起来基本上很好，尽管它看起来确实会将另一个
.readMessage
作为当前
.readMessage
的子代码追加。即

    .readMessage
      p.messageText 
       | this is where i want my #{entry.message} to display when a subject button clicked
      .readMessage //<-- dynamically inserted into DOM by JS code
        p.messageText
          | message

.readMessage
p、 消息文本
|这是我希望在单击主题按钮时显示#{entry.message}的地方
.readMessage//向我们展示您在脚本中尝试的内容。为什么onclick必须显示
p.message
中的值是一个问题？作为一名新开发人员，我建议不要投资于像帕格这样的技术，它的用户群已经缩小了一段时间了，这主要是因为我不确定使用什么其他方法。我也可以添加脚本我不知道我在评论中有足够的空间，我会提交一个答案，但可能没有完整的故事
function putMsg(message) {
  const newReadMessage = document.createElement("div");
  newReadMessage.classList.add("readMessage");
  newReadMessage.innerHTML = `<p class = "messageText"> ${message} </p>`;
  const oldReadMessage = document.querySelector(".readMessage");
  const parent = oldReadMessage.parentNode;
  parent.replaceChild(newReadMessage, oldReadMessage);
}