JavaScript动态添加标签元素
JavaScript动态添加标签元素
听那水 发表于3年前
JavaScript动态添加标签元素
  • 发表于 3年前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 很多时候,我们只写成的静态HTML文件并不能实际满足所有的交互要求,所以,在和用户实时交互中时不时要动态添加标签元素,并为其赋予相应的css样式,那么,怎么做呢?看下面:

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来冬天调用函数。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 9
码字总数 4697
×
听那水
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: