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

最新推荐文章于 2022-09-04 19:55:50 发布

原创最新推荐文章于 2022-09-04 19:55:50 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #XHTML #J# #HTML #ViewUI

js 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在IE7浏览器中使用JavaScript动态创建HTML元素时遇到的问题，并提供了具体的解决方案。针对input元素的name属性无法正确设置及点击事件绑定失败等问题，文章给出了详细的解决步骤。

部署运行你感兴趣的模型镜像

页面源码

<!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"
					onsubmit="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)' onclick="removeInput2('div_0')">删除</a>
								</div> </span>
						</td>
						</tr>
						<tr>
							<td colspan="4" class="add">
								<input type="button" name="button" value="ADD"
									onclick="createInput()">
								<input type="button" name="button" value="ADD2"
									onclick="createInput2()">
								<input type="button" name="button" value="cs" onclick="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);};

您可能感兴趣的与本文相关的镜像