如何使用jQuery将元素转换为字符串

时间:2012-02-07 12:46:47

标签: javascript jquery dom

我不需要innerHTML我需要innerHTML 封闭标签。让我们写一些例子:

<div id="1" style="qwe"><span class="1"></span></div>
<div id="2" style="asd"><span class="2"></span></div>
<div id="3" style="zxc"><span class="3"></span></div>

我可以通过id获取元素:

$("#1")

我怎么能得到这样的字符串:

<div id="1" style="qwe"><span class="1"></span></div>

当然html()不起作用因为它只返回span。

7 个答案:

答案 0 :(得分:6)

你可以这样做:

alert( $('#\\31 ').wrap("<div />").parent().html() )
$('#\\31 ').unwrap()

答案 1 :(得分:5)

这样的事应该可以正常工作:

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

var outer = $("#1").outerHTML();

这是a working fiddle

其他信息

有关原创文章,请参阅http://www.yelotofu.com/2008/08/jquery-outerhtml/

答案 2 :(得分:2)

使用此jQuery插件:https://github.com/brandonaaron/jquery-outerhtml/blob/master/jquery.outerhtml.js

/*! Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 */

(function($){
  var div;

  $.fn.outerHTML = function() {
    var elem = this[0],
      tmp;

    return !elem ? null
      : typeof ( tmp = elem.outerHTML ) === 'string' ? tmp
      : ( div = div || $('<div/>') ).html( this.eq(0).clone() ).html();
  };

})(jQuery);

按如下方式使用:

$('#some-element').outerHTML();

答案 3 :(得分:1)

您可以outerhtml使用JavaScript而不是DOM,而不是jQuery,例如:

  var text = document.getElementById('hello').outerHTML;

jsbin代码演示: http://jsbin.com/obutul/edit#javascript,html,live

答案 4 :(得分:0)

html元素上还有一个outerHTML属性,其中包含所选元素本身。

答案 5 :(得分:0)

outerHTML现在几乎在所有浏览器中实现(包括旧版本的ie - firefox是唯一一个拖延它的脚,但它是scheduled for v11),所以我改编了@James Hill的答案来使用这个原生功能存在,因为它应该更有效。

jQuery.fn.outerHTML = function(s) {
    return this[0].outerHTML ? this[0].outerHTML :
           s ? this.before(s).remove()
             : jQuery("<p>").append(this.eq(0).clone()).html();
};

var outer = $("#1").outerHTML();

请注意,在outerHTML中存在一些跨浏览器的不一致性(例如,在chrome中查看this page并与ie进行比较)

答案 6 :(得分:-1)

您可以将所需的div包装在另一个div中,然后获取父div的html。

<div><div id="1" style="qwe"><span class="1"></span></div></div>
<div><div id="2" style="asd"><span class="2"></span></div></div>
<div><div id="3" style="zxc"><span class="3"></span></div></div>

现在,

$("#1").parent().html()将获取所需的字符串。