如何在Javascript中使用DOM通过单击链接动态生成带有关闭按钮的文本框？ //generate是链接的onclick函数// 函数生成（）{ var text=document.createElement（'input'）； var buttn=document.createElement（'button'）； } //单击时将生成带有按钮的文本框的链接//_Javascript

如何在Javascript中使用DOM通过单击链接动态生成带有关闭按钮的文本框？ //generate是链接的onclick函数// 函数生成（）{ var text=document.createElement（'input'）； var buttn=document.createElement（'button'）； } //单击时将生成带有按钮的文本框的链接//

javascript

如何在Javascript中使用DOM通过单击链接动态生成带有关闭按钮的文本框？ //generate是链接的onclick函数// 函数生成（）{ var text=document.createElement（'input'）； var buttn=document.createElement（'button'）； } //单击时将生成带有按钮的文本框的链接//,javascript,Javascript,当我们点击链接时，文本框应该使用带有按钮的javascript（DOM）生成。当我们点击按钮时，我想删除文本框和按钮。连续点击链接还希望通过关闭按钮生成n个文本框您已经完成了一半。您需要为输入元素设置类型，并为按钮元素设置一些文本。完成后，可以将按钮和文本输入附加到表单中。为此，可以使用document.getElementById（'myForm'）获取表单，然后使用appendChild（）追加文本和按钮元素 input[type=“text”]{ 显示：块； } //generat

当我们点击链接时，文本框应该使用带有按钮的javascript（DOM）生成。当我们点击按钮时，我想删除文本框和按钮。

连续点击链接还希望通过关闭按钮生成n个文本框

您已经完成了一半。您需要为

输入

元素设置类型，并为

按钮

元素设置一些文本。完成后，可以将按钮和文本输入附加到表单中。为此，可以使用

document.getElementById（'myForm'）

获取表单，然后使用

appendChild（）

追加文本和按钮元素

input[type=“text”]{
显示：块；
}


//generate是链接的onclick函数//
函数生成（）{
var form=document.getElementById（“myForm”）；
var text=document.createElement（'input'）；
text.type=“text”；
var button=document.createElement（'button'）；
button.innerText=“单击我”；
表格.附件（文本）；
表单。追加子项（按钮）；
}
//单击时将生成带有按钮的文本框的链接//

元素创建只是第一步。您必须以某种方式使用

append（）、prepend（）、appendChild（）方法之一将创建的元素插入HTML中。它们都插入一个创建的节点
。但您也可以只将HTML字符串添加到另一个元素中：parent.insertAdjacentHTML（“beforeend”，“…”）-如果要插入太复杂的代码，则首选此方法
顺便说一句，可能的解决方案之一是：

let add=document.getElementById（'add-new-input'）；
让form=document.getElementById（'myForm'）；
add.onclick=addNewInput；
表单.addEventListener（'click'，函数（e）{
让target=e.target；//单击的元素
/*谷歌→ JS活动代表团*/
if（target.classList.contains（'delete'））{
target.parentNode.outerHTML=“”；
}
});
函数addNewInput（）{
让输入=创建（“输入”）；
let button=create（'button'，'bubu'）；
设del=create（‘按钮’、‘X’、‘删除’）；
设div=create（'div'，''，“input block”）；
div.append（输入、按钮、删除）；
表格.附属儿童(div);；
}
函数创建（标记、文本、类名）{
让节点=document.createElement（标记）；
node.className=className | |“”；
node.textContent=text | |“”；
返回节点；
}
/*谷歌→ CSS计数器*/
.输入块{
反增量：bubu；
保证金：5px0；
}
.输入块按钮{左边距：5px；}
.delete{颜色：红色；光标：指针；}
.input block:：before{
内容：柜台（bubu）”；
颜色：#045acf；
}


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