javascript的document中的动态添加标签实现方法

2019-11-20 08:40:58

字体：大中小

来源：转载

供稿：网友

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 = "http://www.sina.com";myElement.innerText = "连接到新浪";myElement.style.left = "200px";myElement.style.top = "300px";myElement.style.position = "absolute";//添加到document.bodydocument.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 id="same" href="http://www.sohu.com">搜狐</a><a id="same" href="http://www.baidu.com">百度</a><a id="same" href="http://www.sina.com">新浪</a><input type="button" value="提交" onclick="test1()"/><!-- ID相同的时候只认识第一个 --><hr/><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="排球"/>排球<input type="button" value="提交" name="testing" onclick="test2()"/> <!-- <hr/><h1>获取指定标签的内容</h1><input type="button" value="智能获取" onclick="getN()"> --><hr/><h1>智能添加标签</h1><input type="button" value="智能添加" onclick="addtags()"/><hr/><h1>智能添加/删除input</h1><div style="width:400px;height:300px;border:3px dashed red;" id="div1"></div><input type="button" onclick="addinput()" value="inputAdd"/><input type="button" onclick="deleteinput()" value="inputDelete"/></body>

以上就是小编为大家带来的javascript的document中的动态添加标签实现方法全部内容了，希望大家多多支持武林网~

上一篇：H5移动端适配 Flexible方案

下一篇：Ajax+FormData+javascript实现无刷新表单信息提交