使用javascript或mootools将文本从一个div移动到另一个

Question

我有两个div。 我想使用onclick事件将文本从div id 1移动到div id 2。 我想知道如何做到这一点？ 以及是否可以使用mootools完成任务，还是仅需要简单的javascript？

<script type="text/javascript" src="js/mootools.js"></script>

<script type="text/javascript">
alert($('side-a'));
function my_function(){
    var originalDivHtml = document.id('one').get('html');
    document.id('two').set('html', originalDivHtml);
}
</script>

<div id='one'>
 <ul>
  <input type="checkbox"  onclick = "my_function()"/>
  <li>some text 1</li>
  <input type="checkbox"  onclick = "my_function()"/>
  <li>some text 2</li>
 </ul>
<div>

<div id='two'>
<div>

我也尝试过这种方法，但仍然无法正常工作

<div id='two'>
 <ul>
  <input type="checkbox"  onclick = "my_function()"/>
  <li>some text 1</li>
  <input type="checkbox"  onclick = "my_function()"/>
  <li>some text 2</li>
 </ul>
<div>

<div id='one'>
<div>

<script type="text/javascript">
var one = document.getElementById('one'), two = document.getElementById('two');

function my_function () {
    while (two.childNodes.length) {
        one.appendChild(two.firstChild);
    }
}

</script>

提前为任何帮助加油。 在这里将我的头靠在砖墙上，因为我的JavaScript技能有限！

柯

Answer 1

var originalDivHtml = $('one').get('html');
$('two').set('html', originalDivHtml);

或使用榛子Javascript

var originalDivHtml = document.getElementById('one').innerHTML;
document.getElementById('two').innerHTML = originalDivHtml;

---

该函数应定义为：

function my_function() {
   var originalDivHtml = $('side-a').get('html');
   $('content').set('html', originalDivHtml);
}

您应该有两个元素的ID分别side-a和上述content 。

Answer 2

var one = document.getElementById('one'), two = document.getElementById('two');

function move_two_to_one () {
    while (two.childNodes.length) {
        one.appendChild(two.firstChild);
    }
}