JavaScript动态添加标签元素

1、首先,只有一个空的HTML文档,只在页面加载时,载入一个函数appendOneInput():

<!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=gb2312" />
<title>DHTML</title>  
 
</head>  
<body onLoad="appendOneInput();">     
</body>  
</html>

2、添加JavaScript语句:

<script>  
	function appendOneInput()
	{  
		//创建元素  
		var myElement = document.createElement("input");//输入想要创建的类型  
		myElement.type="text";  
		myElement.value="我是按钮";  
		myElement.id="id1";  
		myElement.style.backgroundColor ="rgba(255,0,9,0.4)";
		myElement.style.border = "2px solid #f00";
		myElement.style.height = "30px";
		myElement.style.fontSize = "16px";
		myElement.style.textAlign = "center";
		//将元素添加到指定的节点  
		//document.getElementById("div1").appendChild(myElement);  
		document.body.appendChild(myElement);  
	}   
</script>

搞定。

当然,你也可以不用载入页面时就加载函数,可以吧appendOneInput()函数绑定到一个button中,通过点击button来冬天调用函数。

你可能感兴趣的:(JavaScript动态添加标签元素)