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


Posted in Javascript onOctober 24, 2016

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中的动态添加标签实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
js实现轮播图特效
May 28 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 #Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 #Javascript
express文件上传中间件Multer详解
Oct 24 #Javascript
用js实现博客打赏功能
Oct 24 #Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 #Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 #Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
js类型检查实现代码
2010/10/29 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
js实现旋转木马效果
2017/03/17 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
高中生操行评语大全
2014/04/25 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
志愿者事迹材料
2014/12/26 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
二年级作文之动物作文
2019/11/13 职场文书
详解Python中的进程和线程
2021/06/23 Python
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python