javascript的document中的动态添加标签实现方法
document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数。我们可以利用这些函数动态改变html的节点。
1、JavaScript
<scripttype="text/javascript"> functiontest1(){//对个节点的ID相同时候的情况 varmyhref=document.getElementById('same'); window.alert(myhref.innerText); } functiontest2(){//输出节点的值 varhobbies=document.getElementsByName("hobby"); for(vari=0;i<hobbies.length;i++){ if(hobbies[i].checked){ window.alert("你的爱好是:"+hobbies[i].value); } } } functiongetN(){//通过标签获取标签对应的值 varmyObj=document.getElementsByTagName('input'); for(vari=0;i<myObj.length;i++){ window.alert(myObj[i].value); } } functionaddtags(){//动态添加超链接节点<a></a> //(1)创建元素<a> varmyElement=document.createElement("a") //(2)给元素添加必要的标示信息 myElement.href="http://www.sina.com"; myElement.innerText="连接到新浪"; myElement.style.left="200px"; myElement.style.top="300px"; myElement.style.position="absolute"; //添加到document.body document.body.appendChild(myElement); } vari=1; functionaddinput(){//添加input元素 varmyElement=document.createElement('input'); myElement.type="button"; myElement.value="奔跑吧"; //myElement.id="i++"; myElement.id="id1"; document.getElementById("div1").appendChild(myElement); } functiondeleteinput(){ //删除一个元素的前提是要知道其父元素是什么。此方法不是很灵活 //方法一 //document.getElementById("div1").removeChild(document.getElementById('id1')); //方法二 document.getElementById('id1').parentNode.removeChild(document .getElementById('id1')); } </script>
2.body体中的调用
<body> <aid="same"href="http://www.sohu.com">搜狐</a> <aid="same"href="http://www.baidu.com">百度</a> <aid="same"href="http://www.sina.com">新浪</a> <inputtype="button"value="提交"onclick="test1()"/> <!--ID相同的时候只认识第一个--> <hr/> <inputtype="checkbox"name="hobby"value="篮球"/>篮球 <inputtype="checkbox"name="hobby"value="足球"/>足球 <inputtype="checkbox"name="hobby"value="排球"/>排球 <inputtype="button"value="提交"name="testing"onclick="test2()"/> <!--<hr/> <h1>获取指定标签的内容</h1> <inputtype="button"value="智能获取"onclick="getN()">--> <hr/> <h1>智能添加标签</h1> <inputtype="button"value="智能添加"onclick="addtags()"/> <hr/> <h1>智能添加/删除input</h1> <divstyle="width:400px;height:300px;border:3pxdashedred;"id="div1"></div> <inputtype="button"onclick="addinput()"value="inputAdd"/> <inputtype="button"onclick="deleteinput()"value="inputDelete"/> </body>
以上就是小编为大家带来的javascript的document中的动态添加标签实现方法全部内容了,希望大家多多支持毛票票~