javascript - jQuery - 将 DOM 的一部分作为字符串获取

Question

我有一个像这样的html代码:

<div id="sample" style="height: 100px">
     <div class="test">
       ...
     </div>
     <div class="test">
       ...
     </div>
     <div class="test">
       ...
     </div>
     ...
 </div>

我需要获取<div id="sample" style="height: 100px">来自此 DOM 的字符串。我怎样才能做到这一点？

Answer 1

假设您想要将 div 的 HTML 作为字符串获取，而该字符串中没有子元素，一种方法可能是选择该元素，克隆它(以避免弄乱 DOM)，将克隆包装在另一个元素中，向上爬行到该元素并获取该元素的内容。

    var str = $("#sample").clone().empty().wrap("<div/>").parent().html();

这是一个 jsfiddle-demo 。所以澄清一下:

.clone() 产量:

<div id="sample" style="height: 100px">
 <div class="test">
   ...
 </div>
 <div class="test">
   ...
 </div>
 <div class="test">
   ...
 </div>
 ...
</div>

.empty()

<div id="sample" style="height: 100px"></div>

旁注:从这里开始，而不是使用 .wrap().parent().html() ，您可以获取原始 DOM 元素并访问 outerHTML - 属性(即 $("#sample").clone().empty()[0].outerHTML )。然而，第一种方法无法解决跨浏览器兼容性问题。

<强> .wrap("<div/>")

<div><div id="sample" style="height: 100px"></div></div>

.parent() 指的是新创建的外部 div ，和.html()返回该内容的内容，这将为您留下字符串 <div id="sample" style="height: 100px"></div>