如何将一个模板克隆到同一个类的多个父母？

我有一个单一的页面应用程序，当我打开同一个应用程序的多个窗口，写一些东西，它应该被复制到所有的应用程序。 但它只能在一个窗口中显示第一个。 我得到这个错误：未被捕获的DOMException：在'Node'上执行'insertBefore'失败：新节点被插入的节点不是这个节点的子节点。

这是我的尝试

let tempHistory = document.querySelector('#tempHistory') let cloneHistory = document.importNode(tempHistory.content, true) let prevEle = document.querySelector('.fldst') document.querySelectorAll('.chat-history').forEach(function (event) { // the new message cannot be inserted to new node parent that it's not the parent event.insertBefore(cloneHistory, prevEle) document.querySelectorAll('.userHistory').forEach(function (event) { event.innerHTML = document.querySelector('.userHistory').value = chatHistory }) }) 

html为克隆的模板

 <div class="chat-history"> <div class="chat-message clearfix"> <!-- <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32"> --> <div class="chat-message-content clearfix"> <span class="chat-time">13:35</span> <h5>server</h5> <p class="serverRespond"></p> </div> <!-- end chat-message-content --> </div> <!-- end chat-message --> <hr> <template id="tempHistory"> <div class="chat-message clearfix"> <div class="chat-message-content clearfix"> <span class="chat-time">13:37</span> <h5>the user</h5> <p class="userHistory"></p> </div> <!-- end chat-message-content --> </div> <!-- end chat-message --> <hr> </template> <fieldset class="fldst" > <textarea name="textarea" id="userMessage" rows="2" cols="40" placeholder="Type your message…"></textarea> <button id="send" >send</button> </fieldset> 

消息历史应该在所有聊天框中，而不仅仅是第一个。