怎么用javascript实现在页面上通过点击，在页面上追加显示一个原有的对象，相当于对象的复制。如下：
<inputtype="button"onclick="split()"/><divid="d1">出差目的：<inputtype="text"name="target"...
<input type="button" onclick="split()"/>
<div id="d1">
出差目的：<input type="text" name="target"/> <br/>
出差地点：<input type="text" name="place"/> <br/>
开始时间：<input type="text" name="begin"/><br/>
结束时间：<input type="text" name="end"/> <br/>
</div>
通过点击按钮，触发js函数split,实现下面这个id=d1的层的复制显示，也就是点击一次，就在页面上再显示一个跟id=d1相同的层，这个split函数怎么写？
急！望各位高手出手相助 展开
<div id="d1">
出差目的：<input type="text" name="target"/> <br/>
出差地点：<input type="text" name="place"/> <br/>
开始时间：<input type="text" name="begin"/><br/>
结束时间：<input type="text" name="end"/> <br/>
</div>
通过点击按钮，触发js函数split,实现下面这个id=d1的层的复制显示，也就是点击一次，就在页面上再显示一个跟id=d1相同的层，这个split函数怎么写？
急！望各位高手出手相助 展开
4个回答
展开全部
下面的是测试通过的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cloneNode</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="button" onclick="split();" value="复制"/>
<div id="container">
<div id="d1">
<hr/>
出差目的：<input type="text" name="target0"/> <br/>
出差地点：<input type="text" name="place0"/> <br/>
开始时间：<input type="text" name="begin0"/><br/>
结束时间：<input type="text" name="end0"/> <br/>
</div>
</div>
<script type="text/javascript">
var target = document.getElementById("d1"); //获取目标对象
var container=document.getElementById("container"); //获取容器对象
var count=0;//计数器，用于id或者name
function split(){
if(!target || !container)
{
//目标或者容器不存在,报错或者返回
alert("");
return;
}
count++;
try{
var obj=target.cloneNode(true);//克隆对象
obj.id = "NewId_"+count;//修改id(id需要唯一)
/*修改input的name属性*/
var inputs = obj.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
inputs[i].name = inputs[i].name.replace(/\d*$/, count);
}
container.appendChild(obj);//添加到容器
}
catch(e){
//错误处理
alert(e);
}
}
</script> </body>
</html>
不好排版呀。。
同样你可以用jquery：
$("#container").append($("#d1").clone());
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cloneNode</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="button" onclick="split();" value="复制"/>
<div id="container">
<div id="d1">
<hr/>
出差目的：<input type="text" name="target0"/> <br/>
出差地点：<input type="text" name="place0"/> <br/>
开始时间：<input type="text" name="begin0"/><br/>
结束时间：<input type="text" name="end0"/> <br/>
</div>
</div>
<script type="text/javascript">
var target = document.getElementById("d1"); //获取目标对象
var container=document.getElementById("container"); //获取容器对象
var count=0;//计数器，用于id或者name
function split(){
if(!target || !container)
{
//目标或者容器不存在,报错或者返回
alert("");
return;
}
count++;
try{
var obj=target.cloneNode(true);//克隆对象
obj.id = "NewId_"+count;//修改id(id需要唯一)
/*修改input的name属性*/
var inputs = obj.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
inputs[i].name = inputs[i].name.replace(/\d*$/, count);
}
container.appendChild(obj);//添加到容器
}
catch(e){
//错误处理
alert(e);
}
}
</script> </body>
</html>
不好排版呀。。
同样你可以用jquery：
$("#container").append($("#d1").clone());
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个应该选写好几个层，然后点击一次，显示一个吧。只提供思路，程序不会写。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var copyDiv =$("#d1").clone();
$("#d1").before(copyDiv);
$("#d1").before(copyDiv);
追问
你好，我试了下好像不行啊，before函数的用法是什么啊
追答
你确信你导入jquery库了吗
就这个例子来讲 before是指 在div d1的同级层里，在d1前面加如html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
jquery写法
function split(){
$("#d1").clone(true).insertAfter($("#d1"));
};
//非jquery写法
function split(){
var obj=document.getElementById('d1');
var newpara = obj.cloneNode(true);
document.body.appendChild(newpara)
}
</script>
jquery写法
function split(){
$("#d1").clone(true).insertAfter($("#d1"));
};
//非jquery写法
function split(){
var obj=document.getElementById('d1');
var newpara = obj.cloneNode(true);
document.body.appendChild(newpara)
}
</script>
追问
你好，我在做一个行程拆分的功能，就是一个行程中可以包含多个行程安排。通过你的方法，追加显示实现了，还有就是，怎么控制比如当有两个行程安排的时候，在前面显示 “行程一”，“行程二”。如果只有一个就不显示。
追答
这个你使用 createElement 在每个行程前面 创建 HTML标签 来显示 标题就可以了
你可以判断对象 obj 的长度 obj.length 来 进行 创建 “行程一/二”
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
