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中的动态添加标签实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • js 用CreateElement动态创建标签示例

    //定义方法创建一个label标签 //*************************************// 复制代码 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement("label"); var label_id = document.createAttribute("id"); label_id.nodeValue = i

  • js动态创建标签示例代码

    复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":&q

  • JavaScript动态创建link标签到head里的方法

    本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

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

    document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne

  • JavaScript检测字符串中是否含有html标签实现方法

    功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

  • JS点击动态添加标签、删除指定标签的代码

    1.div标签 <div id="mDiv3"> <p>1</p> <button onclick="myFun9()">添加</button> </div> 2.js function myFun9() { var mDiv3 = document.getElementById("mDiv3"); //获取组件1 var eleme = document.createEle

  • Android使用addView动态添加组件的方法

    Android使用addView动态添加组件的方法

    在项目开发中,我们经常需要进行动态添加组件,其中可添加的部分有两项:布局和组件 其中,添加的布局主要有RelativeLayout型(相对布局)的和LinearLayout(线性布局) 添加的组件主要有文本显示框,编辑框,按钮等组件. 下面,就让我们来进行实现: 首先我们创建一个新的项目,删除MainActivity.class中没有的代码,仅留下protected void onCreate(Bundle savedInstanceState)函数往布局文件中添加一个新的组件: 1. addV

  • jQuery实现动态添加标签事件

    jQuery实现动态添加标签事件

    本文实例为大家分享了jQuery实现动态添加标签事件的具体代码,供大家参考,具体内容如下 代码: <body> <table id="tableID" border="1" align="center" width="60%"> <tr> <th>用户名</th> <th>密码</th> <th>操作</th> <

  • JavaScript动态添加列的方法

    本文实例讲述了JavaScript动态添加列的方法.分享给大家供大家参考.具体实现方法如下: /*** * 动态添加table 列 * @param result */ function addRow(resultJson){ /* var temp = []; temp = $.grep(arr, function(val, key) { if(val.indexOf('c') != -1) return true; // 如果[invert]参数不给或为false, $.grep只收集回调函

  • 给Ajax返回的HTML标签动态添加样式的方法

    今天在做项目时,在页面中用ajax返回了另一个页面,突然发现返回页面中的表格把页面给顶了出去,经过一番研究,终于解决了. 先准备好要返回内容的容器 <div class="container"> </div> 预定义一个样式,以便返回的内容能直接套用 比如,我们希望返回的表格不会太过分,把页面给顶开了... <style> .container table{ width:100%; } </style> 最后直接在容器中用ajax返回内容

  • Android实现动态添加标签及其点击事件

    在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添加TextView作为标签,并给TextView设置背景,通过selector选择器改变其背景颜色,来确定是否处于选中状态. 代码如下所示: 1.标签的布局文件,我在标签里只设置了一个TextView <?xml version="1.0" encoding="utf-8&

  • C#中GridView动态添加列的实现方法

    本文实例讲述了C#中GridView动态添加列的实现方法.分享给大家供大家参考.具体如下: protected void Page_Load(object sender, EventArgs e) { TemplateField mycustomField = new TemplateField(); //创建列实例 mycustomField.ShowHeader = true; // 设置属性 LinkButton lb = new LinkButton(); lb.Text = "Dele

  • Javascript 创建类并动态添加属性及方法的简单实现

    JavaScript 是一种很强的面向对象的语言,支持创建实例之后再添加属性和方法,虽然是小技巧,用的时候容易忘记,今天写了一个很小的例子,记录在这里,仅供参考. function MyClass() { //This function is same as a constructer alert("New Object Created"); } //Creating Object var MyObject = new MyClass (); NewObject.prototype =

随机推荐