jQuery-以字符串形式获取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>

试试这个

var str = $('#sample')[0].outerHTML.split('\n')[0];

alert(str);

http://jsfiddle.net/d27frp8a/

只是另一种方式:

var element = $('#sample')[0];
var outer = element.outerHTML;
var inner = element.innerHTML;
var line = outer.substring(0, outer.indexOf(element.innerHTML));

1. 获取完整元素的字符串表示
2. 获取内部内容的字符串表示
3. 获取从开始到内部移位的子字符串