我正在开发一个网页，用户可以通过该网页添加问题和答案。要添加新问题，用户单击按钮，新的 div 将添加到容器中。
问题是，当添加一个新的文本区域时，其他文本区域中的文本会被删除。
点击按钮前填充文本区域的 View
点击按钮后的文本区域 View
代码:
<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>最佳答案
innerHTML 重建整个内容。尝试以下操作:
<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').insertAdjacentHTML('beforeend', template);
}
</script>
</head>
<body>
<div class="container">
</div>
<button id="add" type="button" name="button" onclick="on_click()">add</button>
</body>
</html>有关 innerHTML 的更多信息，click here
关于javascript - 从 JavaScript 添加 HTML 会从输入中删除书面文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50695925/