Как выбрать весь код по селектору jquery html()

394

03 января 2018, 17:30

$(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>

Как в переменную takeHtml положить HTML не только, который находится в блоке, а и код самого блока. Т.е. результат должен быть не такой:

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

А такой:

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

Вариант с "" + takeHtml + "" не желателен, ведь tr может содержать кучу других селекторов.

Answer 1

На JQuery это делается хаком, добавляя ваш элемент в пустой div.

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

Так же эту задачу легко решить на чистом JavaScript

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

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

Answer 2

В JQuery такой функции нет и решается она с помощью костыля. Предлагаю решить используя чистый 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>