下面小编就为大家带来一篇浅谈javascript的document中的动态添加标签实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
document的高级篇中提供了节点操作的函数，具体包括：获取节点，改变节点，删除节点，替换节点，创建节点，添加节点，克隆节点等函数。我们可以利用这些函数动态改变html的节点。
1、JavaScript
<script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.innerText); } function test2() {//输出节点的值 var hobbies = document.getElementsByName("hobby"); for (var i = 0; i < hobbies.length; i++) { if (hobbies[i].checked) { window.alert("你的爱好是：" + hobbies[i].value); } } } function getN() {//通过标签获取标签对应的值 var myObj = document.getElementsByTagName('input'); for (var i = 0; i < myObj.length; i++) { window.alert(myObj[i].value); } } function addtags() {//动态添加超链接节点<a></a> //(1)创建元素<a> var myElement = document.createElement("a") //(2)给元素添加必要的标示信息 myElement.href = "https://www.sina.com"; myElement.innerText = "连接到新浪"; myElement.style.left = "200px"; myElement.style.top = "300px"; myElement.style.position = "absolute"; //添加到document.body document.body.appendChild(myElement); } var i = 1; function addinput() {//添加input元素 var myElement = document.createElement('input'); myElement.type = "button"; myElement.value = "奔跑吧"; //myElement.id="i++"; myElement.id = "id1"; document.getElementById("div1").appendChild(myElement); } function deleteinput() { //删除一个元素的前提是要知道其父元素是什么。此方法不是很灵活 //方法一 //document.getElementById("div1").removeChild(document.getElementById('id1')); //方法二 document.getElementById('id1').parentNode.removeChild(document .getElementById('id1')); } </script>
2.body体中的调用
<body> <a href="https://www.sohu.com">搜狐</a> <a href="https://www.baidu.com">百度</a> <a href="https://www.sina.com">新浪</a> <input type="button" value="提交"/> <!-- ID相同的时候只认识第一个 --> <hr/> <input type="checkbox" value="篮球"/>篮球 <input type="checkbox" value="足球"/>足球 <input type="checkbox" value="排球"/>排球 <input type="button" value="提交"/> <!-- <hr/> <h1>获取指定标签的内容</h1> <input type="button" value="智能获取"> --> <hr/> <h1>智能添加标签</h1> <input type="button" value="智能添加"/> <hr/> <h1>智能添加/删除input</h1> <div></div> <input type="button" value="inputAdd"/> <input type="button" value="inputDelete"/> </body>
以上就是小编为大家带来的javascript的document中的动态添加标签实现方法全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: