js克隆id对象后如何修改id下子元素的id值
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!---->
<div id="lbys">
<div class="shurukuang" id="tps_0">图片1地址:
<input type="text" id="img0_ad">
图片1链接:
<input type="text" id="img0_li">
</div>
</div>
<button name="tianjia" style="width:100px;" id="tj" onclick="tjs()" >添加一个图片</button>
<button name="tianjia" style="width:100px;" id="tj" onclick="scs()" >删除一张图片</button>
<button name="ddd" onclick="as()" style="width:100px;">生成代码</button><br/>
<!---->
<script>
var zhs=0;
var $=function(cs){
return document.getElementById(cs)
};
function tjs(){
var sourceNode = $("tps_"+zhs);
var clonedNode = sourceNode.cloneNode(true); // 克隆节点
zhs=zhs+1;
var vbn="tps_" + zhs
clonedNode.setAttribute("id",vbn );
sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
}
</script>
</body>
</html>
上面是我写的只更改父id的代码, 不会写也能修改子元素id值代码,可能我表达不清楚,看下面的代码,就是要做到下面哪种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!---->
<div id="lbys">
<div class="shurukuang" id="tps_0">图片1地址:
<input type="text" id="img0_ad">
图片1链接:
<input type="text" id="img0_li">
</div>
</div>
<div class="shurukuang" id="tps_1">图片2地址:
<input type="text" id="img1_ad">
图片2链接:
<input type="text" id="img1_li">
</div>
<div class="shurukuang" id="tps_2">图片3地址:
<input type="text" id="img2_ad">
图片3链接:
<input type="text" id="img2_li">
</div>
</div>
</div>
<button name="tianjia" style="width:100px;" id="tj" onclick="tjs()" >添加一个图片</button>
<button name="tianjia" style="width:100px;" id="tj" onclick="scs()" >删除一张图片</button>
<button name="ddd" onclick="as()" style="width:100px;">生成代码</button><br/>
<!---->
</body>
</html>
相关推荐
javascript克隆元素样式的实现代码
代码如下: /** * 克隆元素样式 * @param {HTMLElement} 被克隆的元素 * @param {Boolean} 是否启用缓存(默认true) * @return {String} css类名 */ var cloneStyle = (function (doc) { var rstyle = /^(number|string)$/, cloneName = ‘${cloneName}’, sData = {}, addHeadStyle = function (content) { var style = sData[doc]; if (!style) { style
JavaScript 用cloneNode方法克隆节点的代码
很多时候我们需要通过HTML DOM 的方式,用JavaScript 动态生成很多相同的节点,包括其子节点
关于jquery克隆,给元素赋值详解
关于jquery克隆,给元素赋值详解,包括ajax 克隆技术的联合使用
JS简单添加元素新节点的方法示例
主要介绍了JS简单添加元素新节点的方法,结合实例形式分析了javascript针对页面元素节点的创建、添加、克隆等相关操作技巧,需要的朋友可以参考下
JS扩展类,克隆对象与混合类实例分析
本文实例讲述了JS扩展类,克隆对象与混合类。分享给大家供大家参考,具体如下: 1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; subClass.superclass = superClass.prototype


基础编程
