template-div克隆到相同的模板javascript中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了template-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>
事件处理者:
document.querySelector('#memoryLauncher').onclick = function () {
let container = document.querySelector('#wrapper')
let mainTemplate =
document.querySelectorAll('template'[0].content.firstElementChild
let div = document.importNode(mainTemplate, true)
container.appendChild(div)
startMemory(4, 4)
}
document.querySelector('#chatLauncher').onclick = function () {
let container = document.querySelector('#wrapper')
let mainTemplate =
document.querySelectorAll('template'[0].content.firstElementChild
let div = document.importNode(mainTemplate, true)
container.appendChild(div)
let chat = new Chat(document.querySelector('.windowContent'))
chat.connect().then(function (socket) {
})
}
答案
您需要在“主”模板和“子”模板上调用importNode
。接下来,将subTemplate附加到mainTemplate节点。最后,这需要附加到#wrapper
div。
我还将模板移出#wrapper
div,因为我认为#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) {
})
}
以上是关于template-div克隆到相同的模板javascript中的主要内容,如果未能解决你的问题,请参考以下文章
SharePoint - 将 Web 部件从模板网站克隆到新网站 - XML 错误