Issue regarding cloneNode in javascript

Question

I am using javascript cloneNode method to clone a table row which is actually hidden. But the row is being cloned with that hidden property. I dont want that. I want that when that row will be cloned it will have visibility on.

That particular table row is:

<tr style="visibility:hidden;">
    <td><input size=25 type="text" id="latbox"/></td>
    <td><input size=25 type="text" id="latbox"/></td>
    <td><input size=25 type="text" id="latbox"/></td>
    <td><input size=25 type="text" id="latbox"/></td>
    <td><input size=25 type="text" id="latbox"/></td>
    <td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
    <td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>

And the javascript code where I am cloning this row is:

 var x=document.getElementById('POITable');
 var new_row = x.rows[1].cloneNode(true);
 x.appendChild( new_row );

So, how to set, rather control the style of the new cloned row? Please give some hints.

Please give me javascript solutions only (no jquery). I need to develop the project using javascript.

Answer 1

First, use 0 instead 1 for the index.

next you can set style visibility to visible before adding the row to the table.

var x=document.getElementById('POITable');
var new_row = x.rows[0].cloneNode(true);
new_row.style.visibility = "visible";
x.appendChild( new_row )

Here is a fiddler