js如何获得子元素的内容？

Question

<div class="1">
  <div class="1-1">
    第一层
  </div>
  <div class="1-2">第二层</div>
  <div class="1-3"><input type="button" id="确定"></div>
</div>
<div class="2">
  <div class="2-1"></div>
  <div class="2-2"></div>
</div>
如何在点击确定按钮后分别把层1-1,1-2的内容添加到2-1和2-2中？

Answer 1

document.getElementById("2-1").innerHTML = document.getElementById("1-1").innerHTML;
记得改id

Answer 2

<div class="1">
  <div class="1-1">
    第一层
  </div>
  <div class="1-2">第二层</div>
  <div class="1-3"><input type="button" id="确定"></div>
</div>
<div class="2">
  <div class="2-1">
    第一层
  </div>
  <div class="2-2">第二层</div>
  <div class="2-3"><input type="button" id="确定"></div>
</div>
<div class="3">
  <div class="3-1"></div>
  <div class="3-2"></div>
</div>
<div class="4">
  <div class="4-1"></div>
  <div class="4-2"></div>
</div>
哦，我的问题没表达清楚，应该是在点击确定时判断点击哪个判断。如果点击的是div1里的确定，就把1-1,1-2分别添加到3-1和3-2中，如果点击的是div2里的确定，就把3-1,3-2分别添加到4-1,4-2中。如此类推

Answer 3

用jQuery
    $('input[type=button]').each(function () {    
        $(this).bind('click', function () {
            var parentClass = $(this).parents('div:last')[0].getAttribute('class');
            $('.' + parentClass + '-1').appendTo('.' + (parseInt(parentClass) + 2) + '-1');
        });
    });

Answer 4

    $('input[type=button]').each(function () {    
        $(this).bind('click', function () {
            var parentClass = $(this).parents('div:last')[0].getAttribute('class');
            $('.' + parentClass + '-1').appendTo('.' + (parseInt(parentClass) + 2) + '-1');
        });
    });

Answer 5

<div class="1">
  <div class="1-1">
    第一层
  </div>
  <div class="1-2">第二层</div>
  <div class="1-3"><input type="button" onclick="_click(this)" id="确定"></div>
</div>
<div class="2">
  <div class="2-1">
    第一层
  </div>
  <div class="2-2">第二层</div>
  <div class="2-3"><input type="button" onclick="_click(this)" id="确定"></div>
</div>
<div class="3">
  <div class="3-1"></div>
  <div class="3-2"></div>
</div>
<div class="4">
  <div class="4-1"></div>
  <div class="4-2"></div>
</div>
<script>
function _click(_this)
{
var _p = _this.parentNode.parentNode;
var _divs = document.getElementsByTagName("div");
if(!!!_this._copy)
{
_this._copy=function(className){
for(var i=0,d=null;d=_divs[i];i++)
{
if(d.className == className)
{
for(var j=0,cd=null;cd=d.childNodes[j];j++)
{
cd.innerHTML = _p.childNodes[j].innerHTML;
}
break;
}
}
}
}
var className = _p.className;
switch(_p.className)
{
case "1":className = "3";break;
case "2":className = "4";break;
}
_this._copy(className);
}
</script>

Answer 6

这种方法不可取：原因
(1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也就是说"永远不要在页面加载时改变页面的Dom模型".(2) 使用修改HTML内容添加元素,  不符合Dom标准. 在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的.