Tôi đang cố gắng để có được HTML của một đối tượng được chọn bằng jQuery. Tôi nhận thức được .html()chức năng; vấn đề là tôi cần HTML bao gồm cả đối tượng được chọn (một hàng trong trường hợp này, trong đó .html()chỉ trả về các ô bên trong hàng).

Tôi đã tìm kiếm xung quanh và tìm thấy một vài phương pháp nhân bản rất "hackish", thêm nó vào một div mới được tạo, v.v., nhưng điều này có vẻ thực sự bẩn. Có cách nào tốt hơn không, hay phiên bản mới của jQuery (1.4.2) có cung cấp bất kỳ loại outerHtmlchức năng nào không?

Chỉnh sửa 2014: Câu hỏi và câu trả lời này là từ năm 2010. Tại thời điểm đó, không có giải pháp nào tốt hơn được phổ biến rộng rãi. Bây giờ, nhiều câu trả lời khác tốt hơn: ví dụ của Eric Hu, hoặc Re Capcha.

Trang web này dường như có một giải pháp cho bạn: jQuery: outsHTML | Đậu hũ

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

Tôi tin rằng hiện tại (5/1/2012), tất cả các trình duyệt chính đều hỗ trợ chức năng bên ngoàiHTML. Dường như với tôi rằng đoạn trích này là đủ. Cá nhân tôi sẽ chọn ghi nhớ điều này:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

EDIT : Số liệu thống kê hỗ trợ cơ bản choelement.outerHTML

• Firefox (Tắc kè): 11 .... Phát hành 2012/03/13
• Chrome: 0,2 ............... Phát hành 2008-09 / 02
• Internet Explorer 4.0 ... Phát hành 1997
• Opera 7 ...................... Phát hành 2003-01-28
• Safari 1.3 ................... Phát hành 2006-01-12

Không cần phải tạo một chức năng cho nó. Chỉ cần làm như thế này:

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(Nhân tiện, bảng điều khiển của trình duyệt của bạn sẽ hiển thị những gì được ghi lại. Hầu hết các trình duyệt mới nhất kể từ khoảng năm 2009 đều có tính năng này.)

Điều kỳ diệu là điều này ở cuối:

.clone().wrap('<p>').parent().html();

Bản sao có nghĩa là bạn không thực sự làm phiền DOM. Chạy nó mà không có nó và bạn sẽ thấy pcác thẻ được chèn trước / sau tất cả các siêu liên kết (trong ví dụ này), điều này là không mong muốn. Vì vậy, có, sử dụng .clone().

Cách thức hoạt động của nó là lấy từng athẻ, tạo một bản sao của nó trong RAM, bọc bằng pcác thẻ, lấy cha mẹ của nó (có nghĩa là pthẻ) và sau đó lấy thuộc innerHTMLtính của nó.

EDIT : Nhận lời khuyên và thay đổi divthẻ thành pthẻ vì nó ít gõ và hoạt động giống nhau.

Thế còn : prop('outerHTML')?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

Và để thiết lập:

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

Nó làm việc cho tôi.

PS : Điều này được thêm vào trong jQuery 1.6 .

Mở rộng jQuery:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

Và sử dụng nó như thế này: $("#myTableRow").outerHTML();

Tôi đồng ý với Arpan (ngày 13 tháng 12 '10 5:59).

Cách làm của anh ta thực sự là một cách tốt hơn để làm điều đó, vì bạn không sử dụng bản sao. Phương pháp nhân bản rất tốn thời gian, nếu bạn có các phần tử con và dường như không ai khác quan tâm rằng IE thực sự CÓ outerHTMLthuộc tính (vâng IE thực sự có MỘT SỐ thủ thuật hữu ích trong tay áo).

Nhưng tôi có thể sẽ tạo ra kịch bản của anh ấy một chút khác biệt:

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

Để thực sự là jQuery-esque, bạn có thể muốn outerHTML()trở thành một getter và setter và có hành vi tương tự html()như có thể:

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof arg == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

Bản demo hoạt động: http://jsfiddle.net/AndyE/WLKAa/

Điều này cho phép chúng tôi chuyển một đối số để outerHTML , có thể là

• một chức năng có thể hủy - function (index, oldOuterHTML) { } - trong đó giá trị trả về sẽ trở thành HTML mới cho phần tử (trừ khi falseđược trả về).
• một chuỗi, sẽ được đặt thay cho HTML của từng thành phần.

Để biết thêm thông tin, hãy xem tài liệu jQuery cho html().

Bạn cũng có thể sử dụng get (Lấy các phần tử DOM khớp với đối tượng jQuery.).

ví dụ:

$('div').get(0).outerHTML;//return "<div></div>"

Là phương pháp mở rộng:

jQuery.fn.outerHTML = function () {
  return this.get().map(function (v) {
    return v.outerHTML
  }).join()
};

Hoặc là

jQuery.fn.outerHTML = function () {
  return $.map(this.get(), function (v) {
    return v.outerHTML
  }).join()
};

Nhiều lựa chọn và trả về html bên ngoài của tất cả các yếu tố phù hợp.

$('input').outerHTML()

trở về:

'<input id="input1" type="text"><input id="input2" type="text">'

Để tạo một plugin FULL jQuery như .outerHTML, hãy thêm đoạn mã sau vào bất kỳ tệp js nào và đưa vào sau jQuery trong tiêu đề của bạn:

_{cập nhật} Phiên bản mới có quyền kiểm soát tốt hơn cũng như dịch vụ thân thiện với jQuery Selector hơn! :)

;(function($) {
    $.extend({
        outerHTML: function() {
            var $ele = arguments[0],
                args = Array.prototype.slice.call(arguments, 1)
            if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
            if ($ele.length) {
                if ($ele.length == 1) return $ele[0].outerHTML;
                else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
            }
            throw new Error("Invalid Selector");
        }
    })
    $.fn.extend({
        outerHTML: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.outerHTML.apply($, args);
        }
    });
})(jQuery);

Điều này sẽ cho phép bạn không chỉ nhận đượcHTML bên ngoài của một phần tử, mà thậm chí còn nhận được trả về Mảng của nhiều phần tử cùng một lúc! và có thể được sử dụng trong cả hai kiểu tiêu chuẩn jQuery như sau:

$.outerHTML($("#eleID")); // will return outerHTML of that element and is 
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));

Đối với nhiều yếu tố

$("#firstEle, .someElesByClassname, tag").outerHTML();

Ví dụ về đoạn trích:

console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); 
console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML());
console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML());

var checkThisOut = $("div").outerHTML();
console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut);
$.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script>
<div id="eleID">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>

bạn cũng có thể làm theo cách này

document.getElementById(id).outerHTML

trong đó id là id của phần tử mà bạn đang tìm kiếm

Tôi đã sử dụng giải pháp của Jessica (được Josh chỉnh sửa) để làm choHTML bên ngoài hoạt động trên Firefox. Tuy nhiên, vấn đề là mã của tôi bị phá vỡ vì giải pháp của cô ấy đã bọc phần tử vào DIV. Thêm một dòng mã đã giải quyết vấn đề đó.

Đoạn mã sau cung cấp cho bạn bên ngoàiHTML để cây DOM không thay đổi.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

Và sử dụng nó như thế này: $ ("# myDiv"). OuterHTML ();

Hy vọng ai đó thấy nó hữu ích!

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

Fiddle ở đây: http://jsfiddle.net/ezmilhouse/Mv76a/

Nếu kịch bản đang nối thêm một hàng mới một cách linh hoạt, bạn có thể sử dụng điều này:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrowlà tên lớp của <tr>. Nó tạo một bản sao của hàng cuối cùng và chèn nó như một hàng cuối cùng mới. Điều này cũng hoạt động trong IE7 , trong khi [0].outerHTMLphương thức không cho phép các bài tập trong eg7

node.cloneNode () hầu như không giống như một hack. Bạn có thể sao chép nút và nối nó vào bất kỳ phần tử cha mong muốn nào và cũng thao tác nó bằng cách thao tác các thuộc tính riêng lẻ, thay vì phải chạy các biểu thức chính quy trên nó hoặc thêm nó vào DOM, sau đó thao tác với nó.

Điều đó nói rằng, bạn cũng có thể lặp lại các thuộc tính của phần tử để xây dựng một biểu diễn chuỗi HTML của nó. Có vẻ như đây là cách mà bất kỳ chức năng bên ngoài nào sẽ được triển khai là jQuery để thêm một chức năng.

Tôi đã sử dụng giải pháp của Volomike được cập nhật bởi Jessica. Chỉ cần thêm một kiểm tra để xem nếu phần tử tồn tại và làm cho nó trở lại trống trong trường hợp nó không.

jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

Tất nhiên, sử dụng nó như:

$('table#buttons').outerHTML();

Bạn có thể tìm thấy một tùy chọn .outerHTML () tốt tại đây https://github.com/darlesson/jquery-outerhtml .

Không giống như .html () chỉ trả về nội dung HTML của phần tử, phiên bản .outerHTML () này trả về phần tử đã chọn và nội dung HTML của nó hoặc thay thế nó dưới dạng phương thức .replaceWith () nhưng với sự khác biệt cho phép HTML thay thế được kế thừa sự xiềng xích

Ví dụ cũng có thể được nhìn thấy trong URL ở trên.

Lưu ý rằng giải pháp của Josh chỉ hoạt động cho một yếu tố duy nhất.

Có thể cho rằng, HTML "bên ngoài" chỉ thực sự có ý nghĩa khi bạn có một yếu tố duy nhất, nhưng có những tình huống có ý nghĩa khi lấy danh sách các yếu tố HTML và biến chúng thành đánh dấu.

Mở rộng giải pháp của Josh, cái này sẽ xử lý nhiều yếu tố:

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

Chỉnh sửa: một vấn đề khác với giải pháp của Josh đã được sửa, xem bình luận ở trên.

Anothe giải pháp tương tự với việc thêm remove()đối tượng DOM tạm thời.

Tôi đã thực hiện thử nghiệm đơn giản này với bên ngoàiHTML là giải pháp tokimon (không có bản sao) và bên ngoàiHTML2 là giải pháp jessica (bản sao)

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

và kết quả trong trình duyệt crôm (Phiên bản 20.0.1132.57 (0)) của tôi là

bên ngoàiHTML: 81ms
bên ngoàiHTML2: 439ms

nhưng nếu chúng ta sử dụng giải pháp tokimon mà không có chức năng bên ngoài gốc (hiện được hỗ trợ trong hầu hết mọi trình duyệt)

chúng tôi nhận được

bên ngoàiHTML: 594ms
bên ngoàiHTML2: 332ms

và sẽ có nhiều vòng lặp và các yếu tố hơn trong các ví dụ trong thế giới thực, vì vậy sự kết hợp hoàn hảo sẽ là

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

vì vậy phương thức clone thực sự nhanh hơn phương thức quấn / unsrap
(jquery 1.7.2)

Đây là một plugin bên ngoài được tối ưu hóa rất tốt cho jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 đoạn mã nhanh khác không tương thích với một số trình duyệt như FF <11)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@Andy E => Tôi không đồng ý với bạn. outsHMTL không cần getter VÀ setter: jQuery đã cung cấp cho chúng tôi 'thay thế' ...

@mindplay => Tại sao bạn tham gia tất cả bên ngoàiHTML? jquery.html chỉ trả lại nội dung HTML của phần tử FIRST.

(Xin lỗi, không có đủ danh tiếng để viết bình luận)

Ngắn và ngọt.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

hoặc sự kiện ngọt ngào hơn với sự trợ giúp của các chức năng mũi tên

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

hoặc hoàn toàn không có jQuery

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

hoặc nếu bạn không thích cách tiếp cận này, hãy kiểm tra xem

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

Điều này khá đơn giản với JavaScript vanilla ...

document.querySelector('#selector')

Điều này rất tốt cho việc thay đổi các phần tử trên dom nhưng KHÔNG hoạt động, tức là khi chuyển một chuỗi html vào jquery như thế này:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

Sau một số thao tác, tôi đã tạo ra một hàm cho phép hoạt động ở trên tức là đối với các chuỗi html:

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};

$.html = el => $("<div>"+el+"</div>").html().trim();

Tôi đã gặp phải vấn đề này trong khi tìm kiếm câu trả lời cho vấn đề của mình, đó là tôi đang cố xóa một hàng của bảng sau đó thêm nó vào cuối bảng (vì tôi đang tự động tạo các hàng dữ liệu nhưng muốn hiển thị 'Thêm mới Ghi 'loại hàng ở phía dưới).

Tôi có một vấn đề tương tự, đó là việc trả lại InternalHtml nên đã thiếu các thẻ TR, giữ ID của hàng đó và có nghĩa là không thể lặp lại quy trình.

Câu trả lời tôi tìm thấy là remove()hàm jquery thực sự trả về phần tử, mà nó loại bỏ, như là một đối tượng. Vì vậy, để loại bỏ và thêm lại một hàng, nó đơn giản như thế này ...

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

Nếu bạn không xóa đối tượng nhưng muốn sao chép nó ở nơi khác, hãy sử dụng clone()chức năng thay thế.

Plugin jQuery như một cách viết tắt để trực tiếp lấy toàn bộ phần tử HTML:

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

Và sử dụng nó như thế này: $(".element").outerHTML();

$("#myNode").parent(x).html(); 

Trong đó 'x' là số nút, bắt đầu bằng 0 là số đầu tiên, sẽ lấy đúng nút bạn muốn, nếu bạn đang cố lấy một nút cụ thể. Tuy nhiên, nếu bạn có các nút con, bạn thực sự nên đặt ID vào cái bạn muốn, mặc dù vậy, chỉ bằng 0 trên cái đó. Sử dụng phương pháp đó và không có 'x' nào hoạt động tốt với tôi.

Giải pháp đơn giản.

var myself = $('#div').children().parent();

$("#myTable").parent().html();

Có lẽ tôi không hiểu đúng câu hỏi của bạn, nhưng điều này sẽ nhận được html của phần tử cha của phần tử được chọn.

Có phải đó là những gì bạn đang theo đuổi?