How to load specific HTML element in a variable?

Question

I would like to load all table elements from my index.html which have the specified class assigned in a variable. Unfortunately the first line of HTML doesn't load correctly.

My HTML (example for one table, usually there a few of them):

<!-- More HTML stuff -->
<table class="class_TopTable table" id="id_TopTable">
  <tr>
    <td>
      <button id="id_Remove">Remove 1</button>
    </td>
    <td>
      <div id="id_Title"><B>Title 1</B></div>
      <div id="id_Content">Content 1</div>
    </td>
  </tr>
</table>
<!-- More HTML stuff -->

My Javascript:

var all_class_TopTable = "";
$('.class_TopTable').each(function(){
      all_class_TopTable += $(this).html();
})

After this JS is run, the variable of all_class_TopTable containts following HTML:

<tbody>
  <tr>
    <td>
      <button id="id_Remove">Remove 1</button>
    </td>
    <td>
      <div id="id_Title"><B>Title 1</B></div>
      <div id="id_Content">Content 1</div>
    </td>
  </tr>
</tbody>

Where the first line is different as my real html. I expect in the beginning <table class="class_TopTable table" id="id_TopTable"> and in the end </table>.

But the result is in the beginning <tbody> and in the end </tbody>.

What do I wrong?

Tables contain thead, tfoot and tbody elements. If you do not specify, than whatever rows that are in the table are in the tbody element. You are reading the HTML of the table so it selects all the children, hence why you get tbody. If you want the table tag, than you need to read the outerHTML. — epascarello
– epascarello, Commented Jan 7, 2019 at 21:28

trincot · Accepted Answer · 2019-01-07 21:27:54Z

3

You are getting the inner HTML of the table node(s), which excludes the table node(s) itself.

You could wrap all the content in a div and then get its html:

var all_class_TopTable = $('<div>').append($('.class_TopTable').clone()).html();

answered Jan 7, 2019 at 21:27

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Baku Bakar Over a year ago

Thanks a lot, now I know why it doesn't work and how to solve it.

Sushanth -- · Accepted Answer · 2019-01-07 21:29:24Z

1

You could use the outerHTML property to capture the element itself along with its descendants.

all_class_TopTable += $(this)[0].outerHTML;

As the html method only captures its descendants, it wraps it with tbody.

answered Jan 7, 2019 at 21:29

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

trincot Over a year ago

Note that it is not the html method that wraps it with tbody. tbody is added at the moment the DOM is built.

Sushanth -- Over a year ago

@trincot Good point. Looks like I interpreted it incorrectly.

Collectives™ on Stack Overflow

How to load specific HTML element in a variable?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related