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中的动态添加标签的更多相关文章

  1. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  3. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  4. Asp.net MVC3 中，动态添加filter

    Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...

  5. 通过源码了解ASP.NET MVC 几种Filter的执行过程 在Winform中菜单动态添加“最近使用文件”

    通过源码了解ASP.NET MVC 几种Filter的执行过程   一.前言 之前也阅读过MVC的源码,并了解过各个模块的运行原理和执行过程,但都没有形成文章(所以也忘得特别快),总感觉分析源码是大神 ...

  6. C# 后台动态添加标签(span,div) 以及模板添加

    很多时候.我们需要在后台用C#代码添加html标签.而不是在html源码中添加. 比如在html源码中简单的一个input 标签 <input type="type" nam ...

  7. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

  8. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  9. EasyUI 布局 - 动态添加标签页（Tabs）

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

随机推荐

  1. #essay 161218# 自己的markdown笔记（日记）方法

    写在前面 本文可能极度无聊--自己markdown笔记方法 我的工具 1. computer 2. samsung mobile phone(自己的小S3) 3. markdownpad 2 4. p ...

  2. Excellent Articles

    Lisp The roots of lisp Recursive Functions of Symbolic Expressions and Their Computation by Machine, ...

  3. ACM失败之路

    校赛打完,已过四月,该是准备背起行囊,踏上考研之路了,自然,得先阔别一下ACM了,想起这几年ACM路,感慨颇多,不得不一诉心肠,与大家分享一下我的ACM历程,如果有人能从此文获取一些益处,那我就很欣慰 ...

  4. NYOJ 333

    http://www.cppblog.com/RyanWang/archive/2009/07/19/90512.aspx?opt=admin 欧拉函数 E(x)表示比x小的且与x互质的正整数的个数. ...

  5. 查找数据库中重复的值的数据，having的使用，count(1),sum等聚会函数

    通过having代替where来使用count(1),sum()等函数.譬如如下数据id value1 21 32 33 53 6 可以写个语句统计value的分组 在这里,可以省略前面的sum(va ...

  6. webpack中字体配置，可以引入bootstrap

    {test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...

  7. iOS 2D绘图 (Quartz2D)之路径(stroke，fill，clip，subpath,blend)

    像往常一样 这个系列的博客是跟着大神的脚步来的.按照往例 在此贴出原博客的出处: http://blog.csdn.net/hello_hwc?viewmode=list我对大神的崇拜之情 如滔滔江水 ...

  8. mysql索引 （校验规则引发的血案）

    EXPLAIN SELECT a.* FROM gc_fin_rate_info  a LEFT JOIN rbac_user b ON a.owner =b.id; 处理之前的情况. 虽然走了索引, ...

  9. 一个五年 Android 开发者百度、阿里、聚美、映客的面试心经

    花絮 也许会有人感叹某些人的运气比较好,但是他们不曾知道对方吃过多少苦,受过多少委屈.某些时候就是需要我们用心去发现突破点,然后顺势而上,抓住机遇,那么你将会走向另外一条大道,成就另外一个全新的自我. ...

  10. Servlet和JSP

    Servlet 一.Servlet 的生命周期. servlet 有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet 接口 的 ...