这里我尝试使用innerHtml将html添加到元素
<body>
<h3>Dynamically Retrieve the chapter name</h3>
<div>
<div>
<button id="addChapter">Add Chapter</button>
<div id="courseStructure">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
JS:
var addChapter = document.getElementById("addChapter");
addChapter.onclick = function(){
document.getElementById("courseStructure").innerHtml += '<div><input type="text" name="chaptername" placeholder="chapter name"/><button id="addSubChapter">Add SubChapter</button><button id="addContent">Add Content</button><br><br></div>';
}
一切似乎都很好，单击按钮时会触发 onclick 事件，但 html 没有添加到元素中。
最佳答案
您没有以正确的格式编写innerHTML。它的innerHTML而不是innerHtml 你的代码应该是..
<body>
<h3>Dynamically Retrieve the chapter name</h3>
<div>
<div>
<button id="addChapter">Add Chapter</button>
<div id="courseStructure">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
您的 .JS 文件将是。
var addChapter = document.getElementById("addChapter");
addChapter.onclick = function()
{
document.getElementById("courseStructure").innerHTML += '<div><input type="text" name="chaptername" placeholder="chapter name"/>
<button id="addSubChapter">Add SubChapter</button>
<button id="addContent">Add Content</button>
<br><br></div>';
}
关于javascript - 为什么 onclick 不能与 innerHtml 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44427385/