模板div克隆到相同的模板javascript中

我在将克隆模板克隆到同一模板时遇到问题。 我有一个主模板和两个子模板。我希望能够在事件的一个主模板中打开一个子模板，在第二个事件的另一个主模板中打开另一个子模板。但现在，它们在每个活动中都以相同的主模板打开。 主模板：

<main>
  <div id="wrapper">

    <template class="myTemplate">
      <div class="dragdiv">
        <div class="dragdivheader">Main template</div>
          <div class="windowContent">

          </div>
      </div>
    </template>

  </div>
</main>

<template>
  <div class="memory">                      
    <a href="#"><img src="image/0.jpeg" alt="A brick"></a>
  </div>
</template>

<template class="chatBox">
  <div class="chat">
    <div class="messages">
      <template>
        <div class="message">
          <p class="author"></p>
          <p class="text"></p> 
        </div>
      </template>
    </div>
    <div id="messageArea">
      <textarea class="messageArea"></textarea>
      <input type="button" class="send" value="Send" />
    </div>
  </div>
</template>

---

您需要在“主”模板和“子”模板上调用

importNode

。接下来，将子模板附加到mainTemplate节点。最后，需要将其附加到

#包装器
div

我还将模板移出了
#wrapper
分区，因为我假设
#wrapper
是创建所有元素的地方。我的代码如下：

document.querySelector('#memoryLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[1].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper')
  container.appendChild(mainNode);

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[2].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper');
  container.appendChild(mainNode);


  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}

您需要在“主”模板和“子”模板上调用
importNode
。接下来，将子模板附加到mainTemplate节点。最后，需要将其附加到
#包装器
div

我还将模板移出了
#wrapper
分区，因为我假设
#wrapper
是创建所有元素的地方。我的代码如下：

document.querySelector('#memoryLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[1].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper')
  container.appendChild(mainNode);

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[2].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper');
  container.appendChild(mainNode);


  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}

除了缺少一个近旁括号外，两个函数的第一部分都是相同的（直到空白行），除了要附加到单击侦听器的哪一个元素之外。我没有足够的上下文，但我怀疑#wrapper和/或模板索引应该在这两者之间有所不同。@RyanHanekamp我添加了wrapper div，如果这稍微清除了它，那么所有元素都应该在其中结束。因此，根据现在的外观，您不认为每个事件都应该创建一个新的主模板容器。除了缺少一个近旁括号之外，两个函数的第一部分都是相同的（直到空白行），除了您连接到单击侦听器的哪个元素之外。我没有足够的上下文，但我怀疑#wrapper和/或模板索引应该在这两者之间有所不同。@RyanHanekamp我添加了wrapper div，如果这稍微清除了它，那么所有元素都应该在其中结束。因此，从现在的外观来看，您不认为每个事件都应该创建一个新的主模板容器？因为这是我希望克隆到的第一个模板，我相信我需要使用
let mainTemplate=document.querySelectorAll（'template'）[0]来指定它
或我可以使用以下类将其作为目标：
让mainTemplate=document.querySelector（'.myTemplate'）.content.firstElementChildlet main template=document.querySelectorAll（'template'）[0]来指定它
或我可以使用以下类将其作为目标：
让mainTemplate=document.querySelector（'.myTemplate'）.content.firstElementChild