使用按钮多次添加文本和输入可以通过以下步骤实现:
<button id="addTextButton">添加文本</button>
<div id="textContainer"></div>
// 获取按钮和文本容器的引用
var addButton = document.getElementById("addTextButton");
var textContainer = document.getElementById("textContainer");
// 监听按钮的点击事件
addButton.addEventListener("click", function() {
// 创建一个新的文本节点
var newText = document.createTextNode("这是新添加的文本。");
// 将新文本节点添加到文本容器中
textContainer.appendChild(newText);
// 创建一个换行符节点
var lineBreak = document.createElement("br");
// 将换行符节点添加到文本容器中
textContainer.appendChild(lineBreak);
// 创建一个输入框元素
var input = document.createElement("input");
input.type = "text";
// 将输入框元素添加到文本容器中
textContainer.appendChild(input);
});
以上代码中,通过使用JavaScript的createElement、createTextNode和appendChild方法,可以在每次按钮点击时动态创建新的文本节点、换行符节点和输入框元素,并将它们添加到文本容器中。
这样,每次点击按钮时,就会在文本容器中添加新的文本和输入框。
这种方法适用于需要动态添加文本和输入框的场景,例如表单中的动态添加表单项、评论区的动态添加评论等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云