我正在开发一个网页,通过该网页用户可以添加问题和答案。要添加新问题,用户单击按钮,然后将新的div添加到容器中。
问题在于,当添加新的文本区域时,将删除在其他文本区域中写入的文本。
单击按钮之前填充文本区域的视图
单击按钮后的文本区域视图
码:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
const template = '<form class="eachtest">' +
'<textarea id="question" rows="4" cols="80" placeholder="Sual"></textarea>' +
'<br><strong> A </strong> ' +
'<textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br>' +
'</form>';
function on_click() {
document.querySelector('.container').innerHTML += template;
}
</script>
</head>
<body>
<div class="container"></div>
<button id="add" type="button" name="button" onclick="on_click()">add</button>
</body>
</html>
最佳答案
由于您应该避免使用内联JS和CSS,因此向您提出以下建议:
在HTML中创建隐藏的div id="template"
,
当您单击“添加”按钮时,使用JS将其内容附加到您的容器之后。
我也将您的id="question"
更改为class="question"
,因为您可以添加多个。
const template = document.querySelector('#template').innerHTML;
var container = document.querySelector('.container');
document.querySelector('#add').onclick = function() {
container.insertAdjacentHTML('beforeend', template);
}
#template {
display: none;
}
<html lang="en" dir="ltr">
<body>
<div class="container"></div>
<button id="add" type="button" name="button">Add</button>
<div id="template">
<form class="eachtest"><textarea class="question" rows="4" cols="80" placeholder="Sual"></textarea><br> <strong> A </strong><textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br></form>
</div>
</body>
</html>
希望能帮助到你。