Dom 文本框的动态创建_Dom - Fatal编程技术网

Dom 文本框的动态创建

dom

Dom 文本框的动态创建,dom,Dom,当我动态创建文本框时，我可以添加任何当我删除最后一个文本框后，它被删除抛出异常 <html> <head>My page </html> <body> <div id="firstdiv"> <input type="text" id="text" id="text1" value=""/> <input type="button" id="

当我动态创建文本框时，我可以添加任何当我删除最后一个文本框后，它被删除抛出异常

<html>
  <head>My page </html>
     <body>
         <div id="firstdiv">   
         <input type="text" id="text" id="text1" value=""/>
         <input type="button" id="butt" name="it's okay" value="+" onclick="text_add()"/>
         <input type="button" id="butt1" name="it's okay" value="-" nclick="text_remove()"/>
         </div>
     </body>
<script type="text/javascript">
var i=0;
function text_add()
{
   ++i;
  var bal=document.createElement("input")
      bal.setAttribute("type","text");
      bal.setAttribute("id","text"+i);
      bal.setAttribute("name","bala");
      firstdiv.appendChild(bal);

}
function text_remove()
{
try{
  var a="\"";
  a+="text"+(i);
  a+="\"";
    alert(a);
  var bal=document.getElementById(a);
  firstdiv.removeChild(bal);
   --i;
}catch(e)
  {
   alert("Echo"+e);
   }
}
</script>
</html>


我的页面
var i=0；
函数文本_add（）
{
++一,；
var bal=document.createElement（“输入”）
bal.setAttribute（“类型”、“文本”）；
余额设置属性（“id”、“文本”+i）；
余额设置属性（“名称”、“余额”）；
第一类附属儿童（bal）；
}
函数文本_remove（）
{
试一试{
var a=“\”；
a+=“文本”+（i）；
a+=“\”；
警报（a）；
var bal=document.getElementById（a）；
第一组移除儿童（bal）；
--一,；
}捕获（e）
{
警报（“回声”+e）；
}
}

chorme抛出错误：删除一个文本框后，如

echoorror:NOT\u FOUND\u ERR:DOM异常8

所以您不需要添加和删除文本框。最新添加的文本框应该被删除吗

首先，你在dom中有一个文本框，它将与你的命名

给它取个名字就行了

var bal = document.getElementById("text" + i);

而且您不必乱搞可以存储的dom ID dom元素作为普通对象像这样的东西很好用

 var textElements = [];
 var firstdiv = document.getElementById("firstdiv");
 function text_add() {
   var bal = document.createElement("input");
   bal.setAttribute("type","text");
   bal.setAttribute("name","bala");
   firstdiv.appendChild(bal);
   textElements.push(bal);
 }
 function text_remove() {
   firstdiv.removeChild(textElements.pop());
 }

pop方法删除数组中最后添加的项

u leave id bal.setAttribute（“id”，“text”+textcelements.push（））；现在它工作得很好。但我想知道代码中出现错误的原因。我只是想知道代码中的bug。首先，这行var bal=document.getElementById（“text1”）；不是取最后一个元素它每次都得到相同的元素。。。我将此代码设置为var a=“\”；a+=“text”+（i）；a+=“\”；是生成最后一个要使用的id的atemt，如bal=document.getElementById（a）。。。。但是您不需要执行此bal=document.getElementById（“text”+i）所需的qoutes。。那么代码就起作用了

var bal = document.getElementById("text" + i);

 var textElements = [];
 var firstdiv = document.getElementById("firstdiv");
 function text_add() {
   var bal = document.createElement("input");
   bal.setAttribute("type","text");
   bal.setAttribute("name","bala");
   firstdiv.appendChild(bal);
   textElements.push(bal);
 }
 function text_remove() {
   firstdiv.removeChild(textElements.pop());
 }