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

Question

我有一个像这样的HTML代码：

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

我需要从这个DOM中获取<div id="sample" style="height: 100px">字符串。我怎么能这样做？

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>

附注： 从这里开始，您可以获取原始DOM元素并访问{{1}，而不是使用.wrap().parent().html()。 } -attribute（即outerHTML）。但是，首先提到的方法无法解决跨浏览器兼容性问题。

<强> $("#sample").clone().empty()[0].outerHTML

.wrap("<div/>")

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

Answer 2

试试这个

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

alert(str);

http://jsfiddle.net/d27frp8a/

Answer 3

另一种方式：

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

1. 获取完整元素的字符串表示
2. 获取
内容的字符串表示形式
3. 从开头到内部部分的转换
获取子字符串