2014-09-29 40 views
0

如此simple jsfiddle所示,以下代码输出<p>I am inner content</p>,但似乎丢弃了div标记。我错过了什么?为什么jQuery在解析html字符串时会丢弃div

var x = $('<div id="#testing"><p>I am inner content</p></div>'); 
alert(x.html()); 
+1

[获取选定元素的外部HTML]的可能重复(http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) – 2014-09-29 05:42:02

回答

3

由于.html()回报x的innerHTML。

获取匹配的 元素集合中第一个元素的HTML内容或设置每个匹配元素的HTML内容。

妍EED得到outerHTML

var log = (function() { 
 
    var $log = $('#log'); 
 
    return function(msg) { 
 
    $('<p/>', { 
 
     text: msg 
 
    }).prependTo($log) 
 
    } 
 
})(); 
 

 
var x = $('<div id="#testing"><p>I am inner content</p></div>'); 
 
log(x.prop('outerHTML'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="log"></div>

+0

噢,好的!如果你有时间的话,小的后续问题...为什么我必须使用'.prop'来获取外部HTML? jquery是否有理由鼓励程序员使用innerHTML?我甚至没有看到一个官方的功能。外部链接 – Hamy 2014-09-29 05:43:51

+0

PS - 我会接受这一次stackoverflow允许我。我已经超时使用太多:-P – Hamy 2014-09-29 05:44:15

+0

@Hamy没有获取外部html的jQuery实用程序方法,它是一个dom属性([Element.outerHTML](https://developer.mozilla.org/en- US/docs/Web/API/Element.outerHTML))... [.prop()](http://api.jquery.com/prop/)用于读取dom元素属性 – 2014-09-29 05:46:17

1

试试这个fiddle

var x = $('<div id="#testing"><p>I am inner content</p></div>'); 
alert(x.prop('outerHTML')); 

outerHTML类似的innerHTML,它是 包含的元素属性打开g关闭标签以及内容。