<!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元素实例 (转载)的更多相关文章

  1. ztree : checkbox 选中/不选中时动态添加/删除DOM元素

    先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...

  2. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  3. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  4. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  5. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  6. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  7. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  8. js实现网页收藏功能，动态添加删除网址

    <html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...

  9. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

随机推荐

  1. native vlan(本征VLAN)

    其实就是不打tag的VLAN,因为你想,一个VLAN在经过交换设备老是打tag,然后再脱掉tag...这个很浪费计算资源,尤其是在转发的报文量相当大的时候. 如何解决:     可以定义一种vlan, ...

  2. VMware中linux配置1-安装VMware tool 共享文件夹

    linux:ubuntu 14 安装Linux,使用的ubuntu-14.04.1-desktop-amd64.iso 安装的,这个就不写了. 为了在linux中访问windows的目录,需要安装VM ...

  3. autobench 测试笔记

    yum install texinfo yum install gnuplot #下载 http://httperf.googlecode.com/files/httperf-0.9.0.tar.gz ...

  4. 如何用JS判断推广链接所属的客服

    今天有一个客户提出一个需求:网站有多个在线客服,每个客服都有自己的网站推广链接,当访客通过该客服的推广链接进入网站时,必须指定由该客服接待. 我的实现思路是获取推广链接中特定字符,然后判断字符对应的客 ...

  5. DPDK内存管理（1）

    1 前言 DPDK将利用hugepage预留的物理内存统一的组织管理起来,然后以库的方式对外提供使用的接口.下图展示了DPDK中内存有关的模块的相互关系. rte_eal            是统一 ...

  6. chrome经常崩溃解决过程

    之前chrome常崩溃,也没有找到原因,就将就着用吧,一直用到今天,今天连续几次崩了,突然想到,难道是因为我访问的域名没有解析(能想到这个,是因为今天分配公司域名测试的时候常输错),于是就输入一个不存 ...

  7. javascript之AJAX学习

    1.AJAX即Asynchronous Javascript+XML.能够向服务器请求额外的数据而无需卸载页面.  AJAx技术的核心是XMLHttpRequest对象(XHR). 2.AJAX只能向 ...

  8. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  9. Amazon评论数据的预处理代码（Positive & Negative）

    Amazon评论数据的预处理代码,用于情感分析,代码改自 https://github.com/PaddlePaddle/Paddle/tree/develop/demo/quick_start/da ...

  10. SQL server同时删除多个表

    ) while exists (select name from sys.tables where name like 'se_%') begin @varname = name from sys.t ...