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. Entity Framework 6 with MySql

        MySQL Connector/Net 6.8.x MySQL Server 5.1 or above Entity Framework 6 assemblies .NET Framework ...

  2. 浅谈Java中的对象和引用

    浅谈Java中的对象和对象引用 在Java中,有一组名词经常一起出现,它们就是“对象和对象引用”,很多朋友在初学Java的时候可能经常会混淆这2个概念,觉得它们是一回事,事实上则不然.今天我们就来一起 ...

  3. VB.NET中图像处理的一些技巧以及其和C#图像处理的差距。

    早期的时候我使用的开发工具是VB6,VB6做图像处理的速度在我的软件Imageshop中有所体现,还是算可以的.目前,我已经改用C#来研究图像算法,C#中有指针,做图像处理起来效率确实要高不少.VB. ...

  4. C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性

    本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...

  5. Linux Core Dump

    当程序运行的过程中异常终止或崩溃,操作系统会将程序当时的内存状态记录下来,保存在一个文件中,这种行为就叫做Core Dump(中文有的翻译成“核心转储”).我们可以认为 core dump 是“内存快 ...

  6. Android(Linux)线路规程的使用

        一般来说,车载导航主机都需要外接若干个UART的外设,如支持HFP的蓝牙模块.与原车通信的CAN解码盒模块.u-blox的GPS模块和DVD机芯等.早年使用Telechips TCC8902+ ...

  7. 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

    has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集. 下面举一个例子: <ul& ...

  8. 使用Cordova和JQM在ios上需要注意的问题

    1.ios编译 cordova platform add ios --save cordova build ios 2.IOS 微信和地图調用問題:因IOS 9.0以上版本白名單限制,衹有加入白名單的 ...

  9. Android开发环境的演变

    之前安装过eclipse,给我的感觉是,好生麻烦.刚开始自己装花了好多时间.隐约还记得有两个小tips: 1)打开时出现 “failed to load the JNI shared library ...

  10. linux终端常用快捷键

    Ctrl + d       删除一个字符,相当于通常的Delete键(命令行若无任何字符,则相当于exit:处理多行标准输入时也表示EOF ) Ctrl + h       退格删除一个字符,相当于 ...