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非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
react 项目中引入图片的几种方式
Jun 02 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 n个不重复的随机数生成代码
2009/06/23 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
JS Array对象入门分析
2008/10/30 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python获取时间戳代码实例
2019/09/24 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
经理助理岗位职责
2014/03/05 职场文书
学校校庆演讲稿
2014/05/22 职场文书
高中学校对照检查材料
2014/08/31 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
英文道歉信
2015/01/20 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android