js document.createElement 动态添加input与A标签的几个问题

最新推荐文章于 2020-12-11 16:49:37 发布

litxuf

最新推荐文章于 2020-12-11 16:49:37 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： jQuery JavaScript XHTML J# HTML ViewUI

本文链接：https://blog.csdn.net/litxuf/article/details/83528927

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>ccccc</title>

	</head>
	<body>
		<div class="place">
			<div id="board" style="padding-left: 15px">

				<form action="/test/asc.do?m=create" method="post"
					οnsubmit="return check2();">
					<table class="add">

						<td align="right">
						</td>
						<td align="left">
							<span id="upload">
								<div id="div_0">
									<input type="text" style="height: 16px" size="30"
										name="configure" />
									<a href='javascript:void(0)' οnclick="removeInput2('div_0')">删除</a>
								</div> </span>
						</td>
						</tr>
						<tr>
							<td colspan="4" class="add">
								<input type="button" name="button" value="ADD"
									οnclick="createInput()">
								<input type="button" name="button" value="ADD2"
									οnclick="createInput2()">
								<input type="button" name="button" value="cs" οnclick="cs()" />
							</td>
						</tr>
						<tfoot>
							<tr>
								<td></td>
								<td>
									<input type="text" name="userId2" />

									<input type="submit" class="button" id="Submit1" value="确定" />
								</td>
							</tr>
						</tfoot>
					</table>
</html>
</div>
</div>
<script>
			var div0_outerHTML=document.getElementById("div_0").outerHTML;
         	 var i=1; 
            
            function createInput2(){
           		 alert(div0_outerHTML);
            	var div_outerHTML = div0_outerHTML.replace(/_0/g, "_"+i);
				var shtml=document.getElementById("upload").innerHTML;
				document.getElementById("upload").innerHTML = shtml + div_outerHTML;
            	i++;
            }
            
          function removeInput2(DIVID){
          var aElement = document.getElementsByName("configure"); 
          if(aElement.length==1){
            	alert("最后的数据 不要删除");
          	return ;
          }
          	 document.getElementById(DIVID).outerHTML="";
          }
          
          function createInput(){   
	             var p=document.createElement("div"); 
	             p.id="div"+i;
	             var aElement=document.createElement("input");   
	             //aElement.name="configure"; 
	             aElement.setAttribute("name","configure");
	             aElement.id="configure";
	             aElement.type="text"; 
	             aElement.size="30"; 
	           
            var A = document.createElement("A");  
	            A.onclick = function (){removeInput(p.id);}; 
				A.setAttribute("href","javascript:void(0)");   
				A.appendChild(document.createTextNode("删除"));  
				p.appendChild(aElement); 
			    p.appendChild(A);  
             if(document.getElementById("upload").appendChild(p) == null) 
                { 
                      return false; 
                 } 
                    i++;
               return true; 
          } 
             function removeInput(divid){ 
               var aElement = document.getElementById("upload");
               var parent= document.getElementById(divid);
               alert(divid);
               alert(parent)
               alert(parent.id);
                if(aElement.removeChild(parent) == null) {
                    return false; 
                }
                return true;   
            } 
      
　　　　function check2(){ 
              var aElement = document.getElementsByName("configure"); 
              alert(aElement);
              alert(aElement.length);
              for(j=0;j<aElement.length;j++){
              	alert(aElement[j].value)
             } 
        
          return true;
       } 
　　　
	function cs(){
	alert( document.getElementById("upload").outerHTML);
	}
	
	
　</script>


</body>
</html>

document.createElement 动态添加 input与A有如下两个问题(IE7)

1. var aElement=document.createElement("input");
             //aElement.name="configure";
             aElement.setAttribute("name","configure");
            上述方法 name属性无法赋值

解决方案:aElement.id="configure"; 设置Id属性

2 A.setAttribute("onclick","removeInput(p.id)");

解决方案： A.onclick = function (){removeInput(p.id);};

litxuf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js document.createElement 动态添加input与A标签的几个问题

页面源码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&..
复制链接

扫一扫