怎么用javascript实现在页面上通过点击,在页面上追加显示一个原有的对 ...
发布网友
发布时间：2022-04-29 01:55
共4个回答
热心网友
时间：2022-04-22 11:59
<!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());
热心网友
时间：2022-04-22 13:17
热心网友
时间：2022-04-22 14:52
$("#d1").before(copyDiv);追问你好，我试了下好像不行啊，before函数的用法是什么啊
追答你确信你导入jquery库了吗
就这个例子来讲 before是指 在div d1的同级层里，在d1前面加如html
热心网友
时间：2022-04-22 16:43
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 来 进行 创建 “行程一/二”
