jQuery

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

试试这个

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

alert(str);

http://jsfiddle.net/d27frp8a/

Answer 2

另一种方式：

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

获取完整元素的字符串表示
获取里面内容的字符串表示
获取子串从头到内的移位

Answer 3

假设您想要将 div 的 HTML 作为字符串获取，而该字符串中没有子项，一种方法可能是 select 元素，将其克隆（以避免弄乱 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 元素并访问outerHTML-属性（即 $("#sample").clone().empty()[0].outerHTML）。但是，第一种方法解决了跨浏览器兼容性问题。

.wrap("<div/>")

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

.parent()指的是新创建的外层div，以及.html()returns那个的内容，其中会留下你用字符串 <div id="sample" style="height: 100px"></div>

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

jQuery - get part of DOM as string

javascript

dom