Question

用javascript在页面上增加div

如图一所示:在网页中一个div包含有一个文本框,一个提交按钮和一个增加表单按钮.点击增加单按钮后如图二所示:在原来基础上增加了一个同样的包含表单的div.再点击如图三所示.请问那个增加表单按钮所触发的函数怎么写?

Answer 1

这是JS对DOM的操控,很显然这里使用一个节点拷贝是最合适的!

var ss = document.getElementById()
找出这个容器,作为一个节点元素,你可以对其进行拷贝!
var ss_copy1 = ss.cloneNodes(true);
这个就是一个节点拷贝的,可以行到一个相同的节点!里边参数的意思是将ss连同所以子结点一同拷贝.而如果是false则,只拷贝当前的节点!
不是拷贝完了就行了!还要将其加入到网页中显示出来!

ss.parentElement.appendChild(ss_copy1);
这句加上后才会显示的!当然你可以不必一定显示在ss父节点的未尾,有很多的显然的方法的,你可以查看一下JS+DOM去查看具体的方法!

不过这个代码你只可以用一次,因为在copy时同时会拷贝id属性,如果本身已经拷贝一个时,document.getElementById()得到的不再是一个,而是两个了,这时你要选择一下!
document.getElementById()[0];
这种方式是取的的是数据时取第一个,下标是0的!所以可以对其进行一次判断!

var ss = document.getElementById("sds")
if(ss.constructor == window.Array)
ss = ss[0];
这句显然是加了判断的.如果是数组时则取第一个!

有时我们这样做也是比较麻烦的,不如将拷贝后的节点进行一个随机的命名!
如:
var ss = document.getElementById("sds");
var ss_copy1 = ss.cloneNode(true);
ss_copy1.setAttribute("id","sds1");
这样可以将新拷贝的id设置成sds1而不再与原来的那个重复了!当然,如果多个时,sds1这个值是随机得到的!一般按时间,要求其不重复的!

就这样,没有什么的!不过你的记着的是节点拷贝后并没有显然在页面上,还在内存中游离着,必须要加到页面上去才会显示的!至于如果加上,这有很多种方式,appendChild只是一个追加在未尾.还有很多的使用方式.具体的查看一下JS+DOM就能看懂的!

Answer 2

javascript 有建立html元素的语句具体你查阅手册

或者百度搜索 javascript 建立元素

建立一个层 在建立其中的元素 将元素添加到自己建立的层里 在把层添加到需要放置的位置

参考 http://cache.baidu.com/c?m=9d78d513d99b12eb0bacc53e56549171192597124dc0a76368a4e25fe5654c40377195bd30516313a2b56b110bbb0e1cb4ff6c34714137b6e8d5950f98fe852858ca7d763847cc0645c419d89a1a389777d609b2f11de5bfe732e4ef8895800a&p=c267c64ad2934eac5ab1d366154f&user=baidu

或者可以使用
<div id="dom"> 主层
<div id="d111"></div> 表单层1
<div id="d112"></div> 表单层2
<div>

var dom = document.getElementById("dom") 获取主层

var xx=document.getElementById("d1111").innerHTML 抓取表单层的内容

dom.innerHTML += xxx 将获取到的内容也就是表单层的内容 重新添加一次到主层

Answer 3

其实不是增加来的 而是当时就写好的只是初始化的时候隐藏了div
当点击按钮的时候让他显示而已！这是最简单的做法！隐藏和现实div的JavaScript你会吧!

还有一种就是真正的修改代码来增加div 比较复杂！所以一般都不会用！

首先从开发页面的人员来说一定能确定你页面上会有多少个div 所以先写好隐藏起来 然后当点击的时候显示一个div 这样就产生了你说的效果！

Answer 4

曾经回答了一个类似的问题,你可以参考一下
http://zhidao.baidu.com/question/95627109.html