Darklizard
Darklizard

Reputation: 377

Add tags to enclose existing table

Here I have an existing table:

<table>
  <tr>
    <td>content
    </td>
  </tr>
</table>

and in JavaScript, I have already obtained this table:

var isert = main_code.getElementsByTagName("table"); 

How to use JavaScript to attach tags to this table so it looks like:

<div id=extra>
 <table>
   <tr>
     <td>content
     </td>
   </tr>
 </table>
</div>

PS: It seems that insertAdjacentHTML only works on current <table>tag, not entire <table></table>.

Thank!

Upvotes: 3

Views: 134

Answers (1)

Amberlamps
Amberlamps

Reputation: 40488

Try this:

var tables = main_code.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++) {
    var div = document.createElement("div");
    var _t = tables[i];
    var parent = _t.parentNode;
    div.id = "extra";
    parent.replaceChild(div, _t);
    div.appendChild(_t);
}

Although, this adds the same id to multiple div container, if there are more than one table. You might want to use div.className = 'extra' instead.

Upvotes: 6

Related Questions