gpt4 book ai didi

javascript - 如何通过单击链接在 Javascript 中使用 DOM 动态生成带有关闭按钮的文本框?

转载 作者:行者123 更新时间:2023-12-02 22:27:36 25 4
gpt4 key购买 nike

<html>
<head>
<script>
//generate is the onclick function of the link//
function generate(){
var text = document.createElement('input');
var buttn = document.createElement('button');
}
</script>
</head>
<body>
<form id="myForm">
<a href="#" onclick="generate()">add contact</a>
// link which will generate the textbox with button when clicked//
</form>
</body>
</html>

当我们点击链接时,应该使用 javascript(DOM) 生成一个带有按钮的文本框。当我们单击按钮时,我想删除文本框和按钮。连续点击链接也想生成n个带关闭按钮的文本框

最佳答案

你已经成功了一半。您需要为 input 元素设置类型,并为 button 元素设置一些文本。完成此操作后,您可以将按钮和文本输入附加到表单中。为此,您可以使用 document.getElementById('myForm') 获取表单,然后使用 appendChild() 附加文本和按钮元素。

input[type="text"] {
display: block;
}
<html>

<head>
<script>
//generate is the onclick function of the link//
function generate() {
var form = document.getElementById("myForm");
var text = document.createElement('input');
text.type="text";
var button = document.createElement('button');
button.innerText = "Click me";
form.appendChild(text);
form.appendChild(button);
}
</script>
</head>

<body>
<form id="myForm">
<a href="#" onclick="generate()">add contact</a> // link which will generate the textbox with button when clicked//
</form>
</body>

</html>

关于javascript - 如何通过单击链接在 Javascript 中使用 DOM 动态生成带有关闭按钮的文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59014464/

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