Question

I have two divs. I would like to move/populate the text from div id one to div id two using an onclick event. I am wondering how to do this? and also whether mootools can be used to accomplish the task or whether simple javascript is only necessary?

<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>

I have also tried like this but it doesnt still work

<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>

Cheers in advance for any helps. Bangin my head against a brick wall here, because my javascript skillz are limited!

Ke

Answer 1

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

or with hazelnut Javascript

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

---

The function should be defined as:

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

You should have two elements having the ID’s side-a and content for the above.