我有一个像这样的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 的字符串。我怎样才能做到这一点?
最佳答案
假设您想要将 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>
关于javascript - jQuery - 将 DOM 的一部分作为字符串获取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28273465/