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

Question

我不需要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。

Answer 1

你可以这样做：

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

Answer 2

像这样的东西应该可以正常工作：

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

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

这是一个工作小提琴。

其他信息

请参阅http://www.yelotofu.com/ 2008/08/jquery-outerhtml/ 为原创文章。

Answer 3

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

/*! Copyright (c) 2006 Brandon Aaron ([email protected] || 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();

Answer 4

您可以使用 outerhtml，但在 JavaScript 中使用 DOM 而不是 jQuery，例如：

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

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

Answer 5

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

Answer 6

现在，outerHTML 已在几乎所有浏览器中实现（包括旧版本的 ie - firefox 是唯一一个拖拖拉拉的浏览器，但它是 计划用于 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中并与ie进行比较）

Answer 7

您可以将所需的 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() 将获取所需的字符串。