How to select all code by jquery html () selector

Question

$(function() { var takeHtml = $('#take').html(); alert(takeHtml); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Zag1</th> <th>Zag1</th> <th>Zag1</th> <th>Zag1</th> </tr> </thead> <tbody> <tr> <td>QWER</td> <td>QWER</td> <td>QWER</td> <td>QWER</td> </tr> <tr id="take"> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> </tr> </tbody> </table>

As in the takeHtml variable , put HTML not only, which is in the block, but also the code of the block itself. Those. the result should not be like this:

 <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td>

And this:

 <tr id="take"> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> </tr>

The option with "" + takeHtml + "" not desirable, because tr may contain a bunch of other selectors.

Dmitry Polyanin Dmitry Polyanin 11.3k one 12 37 · Accepted Answer · 2018-01-01T18:50:21

On jQuery, this is done by a hack, adding your element to an empty div .

 $('<div>').append($('#take').clone()).html();

It is also easy to solve this problem in pure JavaScript.

 var el = document.getElementById("take"); alert(el.outerHTML);

 <div id="take"> <span>xxx</span> yyy </div> <span>lll</span>

Of course, everything is fine, but it would be cool if you inserted your own code, and did not copy it from other questions :)
I copied the jQuery example, but I don’t see a problem in it, if I knew how to do it on jQuery more compactly or beautifully, I would write my own code.

Yuri yuri 13.3k five 36 82 · Answer 2 · 2018-01-01T18:57:41

In jQuery, there is no such function and it is solved with the help of a crutch. I propose to solve using pure JS

 $(function() { var takeHtml = $('#take').get(0).outerHTML; alert(takeHtml); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Zag1</th> <th>Zag1</th> <th>Zag1</th> <th>Zag1</th> </tr> </thead> <tbody> <tr> <td>QWER</td> <td>QWER</td> <td>QWER</td> <td>QWER</td> </tr> <tr id="take"> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> <td>QWER1</td> </tr> </tbody> </table>

How to select all code by jquery html () selector

2 answers 2

More articles: