如何获取包含数据属性的innerHTML

Question

我使用document.body.innerHTML获取HTML的文本版本，以便我可以存储它并稍后使用jQuery＆＃39; s append重新加载它。它工作正常，但它不能保存我在HTML节点中存储的data-*属性。有没有一种方法可以让我获得包含这些数据属性的所有innerHTML的字符串？

Answer 1

假设您使用的是jQuery .data()：

jQuery的.data()方法将数据存储在Javascript中而不是HTML属性中。仅将现有data-*属性拉入该对象。有关详细信息check the docs。

要将数据保存为HTML数据属性，请使用.attr()。如下所示：

$('.el').attr('data-foo', 'bar');

Answer 2

您可以使用.clone（）使用jQuery克隆html

示例html：

<div class="divSource" data-test="Hello" data-test2="World">
  <input type="text" />
</div>

<input type="button" id="btnClone" value="Clone Div" />

<div id="divDesti">   
</div>

的jQuery

$(document).ready(function() {

  $("#btnClone").click(function() {
    var colnedSource = $(".divSource:first").clone();

    $("#divDesti").append(colnedSource);
  });
});

3个克隆后的输出：