我试图将两个不同的模板分别附加到两个单独的div容器。但是，这两个模板仅适用于第一个DIV容器。
<!DOCTYPE html>
<html>
<body>
<div id="cont1">
</div>
<div id="cont2">
</div>
<button onclick="showSection('container1', true)">Container1</button>
<button onclick="showSection('container2', true)">Container2</button>
<template id="container1"><p>This should be in container1</p></template>
<template id="container2"><p>This should be in container2</p></template>
</body>
<script>
function showSection(templateId,repeat){
var temp = document.getElementById(templateId);
var clon = temp.content.cloneNode(repeat);
if(templateId="container1"){
var divId = "cont1"
var position = document.getElementById(divId);
position.appendChild(clon);
}
if(templateId="container2"){
var divId = "cont2"
var position = document.getElementById(divId);
position.appendChild(clon);
}
}
</script>
</html>
然而：
我想念什么？
最佳答案
实际上很简单，我想您可能会踢自己;）
就像更改一样简单：
if(templateId="container1"){
至
if(templateId=="container1"){
使用
=和使用==意味着两件事。Single =是赋值运算符，在if语句中始终等于true（假设它是非负值）。
如==和===中的Double或tripple =是比较，仅当运算符两侧的值相等时才等于true。
您可以在下面找到一个新的工作实例
您会看到我也将第二个
if更改为else if，这只是为了使您的代码更高效，更易读，并且可能会将“更真实”的结果转化为您尝试的结果实现但不是必需的<!DOCTYPE html>
<html>
<body>
<div id="cont1">
</div>
<div id="cont2">
</div>
<button onclick="showSection('container1', true)">Container1</button>
<button onclick="showSection('container2', true)">Container2</button>
<template id="container1"><p>This should be in container1</p></template>
<template id="container2"><p>This should be in container2</p></template>
</body>
<script>
function showSection(templateId,repeat){
var temp = document.getElementById(templateId);
var clon = temp.content.cloneNode(repeat);
if(templateId=="container1"){
var divId = "cont1"
var position = document.getElementById(divId);
position.appendChild(clon);
} else if(templateId=="container2"){
var divId = "cont2"
var position = document.getElementById(divId);
position.appendChild(clon);
}
}
</script>
</html>关于javascript - 为什么我的HTML模板附加到相同的DIV容器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59016395/