Move table row data to another row in html

Question

I want to transfer the complete table row data with id="table_data", to another row with id="table_data_two". On click of button

<table border="">
            <tr id="table_data">
                <td>this data</td>
                <td>this also</td>
                <td>this too</td>
            </tr>
        </table>
<table border="">
            <tr id="table_data_two">
             </tr>
        </table>
<button>click me</button>

Answer 1

The following is a very dirty hack to do what you're asking about, but I don't think it's the best approach to the situation.

I believe the issue isn't "copy HTML form A to B", but a more complex issue that produced the HTML you want to change.

Anyway, here's the hack:

document.getElementById("table_data").innerHTML = 
    document.getElementById("table_data_two").innerHTML;

Answer 2

You can use the innerHTML and copy it to the other table, just give ad id "btn" to your button. but on the second click will copy the empty innerHTML, si I added a check. http://jsbin.com/lakajipeki/edit?html,js,output

document.getElementById("btn").addEventListener("click", function(){
    var rows = document.getElementById("table_data").innerHTML;
    if(rows === ""){return}
    document.getElementById("table_data").innerHTML = ""
    document.getElementById("table_data_two").innerHTML = rows
});