gpt4 book ai didi

javascript - 从 JavaScript 添加 HTML 会从输入中删除书面文本

转载 作者:行者123 更新时间:2023-11-30 11:18:22 25 4
gpt4 key购买 nike

我正在开发一个网页,用户可以通过该网页添加问题和答案。要添加新问题,用户单击按钮,新的 div 将添加到容器中。


问题是,当添加一个新的文本区域时,其他文本区域中的文本会被删除。


点击按钮前填充文本区域的 View

before_click


点击按钮后的文本区域 View

after_click


代码:

<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com