javascript的document中的动态添加标签实现方法
更新时间：2016年10月24日 09:26:52 投稿：jingxian
下面小编就为大家带来一篇浅谈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 = "http://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 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中的动态添加标签实现方法全部内容了，希望大家多多支持脚本之家~
相关文章
最近开发微信小程序进入到支付阶段，一直以来从事App开发，所以支付流程还是熟记于心的。下面通过本文给大家讲述下微信小程序进行微信支付的步骤,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了p5.js实现动态图形临摹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家详细介绍了javascript自定义加载loading效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下2017-01-01
javascript实现tabs选项卡切换效果(自写原生js)
常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果，感兴趣的朋友可以参考下哈2013-03-03
通过button将form表单的数据提交到action层的实例
下面小编就为大家带来一篇通过button将form表单的数据提交到action层的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在JavaScript中，有6大数据类型，分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型，需要的朋友参考下吧2017-12-12
作为一名.net开发人员相信大家都知道C#中字符串拼接与StringBuilder的效率差距。2010-07-07
这篇文章主要为大家详细介绍了countUp.js实现数字滚动效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
今天小编就为大家分享一篇layer.open组件获取弹出层页面变量、函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论