用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用javascript动态添加删除html元素</title>
<script type="text/javascript"><!--
function $(nodeId) {
return document.getElementById(nodeId);
}
function $Name(tagName) {
return document.getElementsByTagName(tagName);
}
function replaceMsg() {
var newNode = document.createElement("P");//创建一个P标签
newNode.innerHTML = "<font color='red'>替换后的文字</font>";
var oldNode = $Name("P")[0];//获取body里面第一个p元素
oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签
}
function removeMsg() {
var node = $("p2");//p标签
var nodeBtn = $("remove");//按钮
//node.parentNode.removeChild(node); //下面效果相同
document.body.removeChild(node);//在body中删除id为P2的元素
//nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮
document.body.removeChild(nodeBtn);
//document.body.removeNode();执行这条语句将清空body里面的任何元素
}
function addbefore() {
var newNode = document.createElement("p");//创建P标签
//var newText = document.createTextNode("前面添加的元素");
//newNode.appendChild(newText);//与下面效果一样
newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//书写P标签里面的内容
var oldNode = $("p3");//目标标签
//document.body.insertBefore(newNode,oldNode);
oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面添加元素
}
function addlast() {
var newNode = document.createElement("p");//创建P标签
//var newText = document.createTextNode("后面添加的元素");
//newNode.appendChild(newText);//与下面效果一样
newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
var oldNode = $("p3");
oldNode.appendChild(newNode);
//document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
}
window.onload = function addArrayMsg() {
var arrayMsg = ['one','two','three','four','five'];//创建数组
var fragment = document.createDocumentFragment();//创建文档片段
var newNode ;
for (var i=0 ;i<arrayMsg.length ;i++ ) {
newNode = document.createElement("P");//创建P标签
var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值
newNode.appendChild(nodeText);//
fragment.appendChild(newNode);//把P标签追加到fragment里面
}
document.body.appendChild(fragment);//把fragment追加到body里面
}
function addRow() {
var tab = $("myTable");
//tab.createCaption().innerHTML="<font color='red'>我的表格</font>";
var oldTr = $("handleTr");
var newTr = tab.insertRow();//创建一行
var newTd1 = newTr.insertCell();//创建一个单元格
var newTd2 = newTr.insertCell();//创建一个单元格
newTd1.innerHTML = "<input type='checkbox' />";
newTd2.innerHTML = "<div class='division clearfix' id='goods_value'><div class='span-3'> <span title='09春季新款简约大方高雅修身针织连衣裙983配腰带'> <a href='?product-55.html'>09春季新款简约大方高雅修身针织连衣裙983配腰带 </a> </span> </div> <a class='floatRight lnk' href='#' onclick=''>删除</a> </div>" ;
}
function removeRow() {
var tab = $("myTable");
// if(tab.rows.length>0){
// tab.deleteRow();
// if(tab.rows.length==1)
// tab.deleteCaption();
// }
var cbbox ;
for(var i=0;i<tab.rows.length;i++){
cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素
if(cbbox.checked){
tab.deleteRow(i--);
}
}
}
//全选
function selAll(value){
var items = document.all.tags("input");//获取页面上所有的input元素
for(var i = 0;i<items.length;i++){
if(items[i].type=="checkbox"){//判断类型是否为checkbox
items[i].checked = value.checked;
}
}
}
function getInputValue() {
var inputArray = new Array();//创建一个数组
var tab = $("myTable");
var tbInput;
for(var i=0;i<tab.rows.length;i++){
tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
if(tbInput!=""&&tbInput!=null)
inputArray.push(tbInput);
}
inputArray = inputArray.join("*^&");//默认以","号连接
$("showValue").value = inputArray;
}
var x ='10+20';
("alert(x);")
// --></script>
</head>
<body>
<p id="p1">Hello World!
<input type="button" value="替换内容" onclick="replaceMsg();" />
<p id="p2">我可以被删除!
<input type="button" id="remove" value="删除它" onclick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧！
<input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />
<input type="button" id="addlast" value="后面添加" onclick="addlast();" />
<div style="border:1px solid blue;height:300px">
<table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" style="padding:4px;">
</table>
<input type="checkbox" onclick="selAll(this);" />
<input type="button" value="添加一行" id="addRow" onclick="addRow();" />
<input type="button" value="删除一行" id="removeRow" onclick="removeRow();" />
<textarea rows="5" cols="25" id="showValue" />
</div>
</p>
</p>
</p>
</body></html>
用Javascript动态添加删除HTML元素实例 (转载)的更多相关文章
- ztree : checkbox 选中/不选中时动态添加/删除DOM元素
先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...
- javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...
- 编辑 Ext 表格（一）——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- js实现网页收藏功能，动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- 转： javascript动态添加、修改、删除对象的属性和方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
随机推荐
- 【转】部分电脑安装升级 ubuntu 12.04 后无法挂起问题的解决(挂起无法唤醒同样有效)
原文地址:http://blog.csdn.net/longerzone/article/details/7860232 我的Ubuntu12.04是安装的windows桌面安装版(使用wubi安装) ...
- this的指向（慢慢添加）
this的指向: 1.行间调用函数: <div id="div1" onclick="show()"></div> <script ...
- python3 实现简单信用卡管理程序
1.程序执行代码: #Author by Andy #_*_ coding:utf-8 _*_ import os,sys,time Base_dir=os.path.dirname(os.path. ...
- nginx学习记录/2016.11.14
nginx(engine X)是一个高性能的web服务器和反向代理服务器以及电子邮件代理服务器 由俄罗斯的程序设计师Igor Sysoev所开发 nginx+tomcat实现负载均衡 参考地址:htt ...
- JAVA GUI布局管理器
边界布局管理器: a.布局方式:是把整个容器划分为五个部分.东西南北中,南北要贯通,中间最大 (不仅是中间的范围最大,权利也最大)当周边不存在的时候中间会占领周边,当中间不存在的时候周边不能占据中间 ...
- jmeter Transaction Controller学习
测试计划组成:一个计时器(2秒),一个事物控制器,两个http request 在Transaction Controller中不勾选第2个选项就相当于lr中的忽略思考时间 没有勾选第2项的执行结果: ...
- Socket通讯
复习贴,资料大多来自百科.看了一遍理解了一遍,把绕口的话按语义给改了`_>` 对于一个网络连接来说,套接字是平等的,并没有差别,不因为在服务器端或在客户端而产生不同级别.不管是Socket还是S ...
- 开发Blog整理
开发Blog记录 清理收藏夹 太多了,来不及看了. http://blog.sina.com.cn/s/blog_67d95f40010113ec.htmlhttp://segmentfault.co ...
- ueditor使用小结
一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...
- Swift 04.Functions
函数的基本构造 基本结构 func 函数名 (形参名:形参类型) ->返回值 {实现代码} 如果没有参数,那么也必须把参数的括号带上 如果有多个形参,那么必须以逗号 , 隔开 如果没有返回值,那 ...