ฉันพยายามรับ HTML ของวัตถุที่เลือกด้วย jQuery ฉันตระหนักถึง.html()ฟังก์ชั่น; ปัญหาคือฉันต้องการ HTML รวมถึงวัตถุที่เลือก (แถวของตารางในกรณีนี้โดยที่.html()คืนค่าเซลล์ภายในแถวเท่านั้น)

ฉันค้นหาไปรอบ ๆ และพบวิธีการ 'แฮ็ก' ที่พิมพ์ไม่กี่วิธีในการโคลนวัตถุเพิ่มเข้าไปใน div ที่สร้างขึ้นใหม่ ฯลฯ ฯลฯ แต่ดูเหมือนว่าสกปรกจริงๆ มีวิธีใดที่ดีกว่านี้หรือ jQuery รุ่นใหม่ (1.4.2) มีouterHtmlฟังก์ชั่นใด ๆหรือไม่?

2014 แก้ไข: คำถามและคำตอบนี้มาจาก 2010 ในขณะนั้นไม่มีวิธีแก้ปัญหาที่ดีกว่าอย่างกว้างขวาง ตอนนี้คำตอบอื่น ๆ อีกมากมายดีกว่า: ตัวอย่างของ Eric Hu หรือ Re Capcha

ไซต์นี้ดูเหมือนจะมีทางออกสำหรับคุณ: jQuery: outerHTML | Yelotofu

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

ฉันเชื่อว่าในปัจจุบัน (5/1/2555) เบราว์เซอร์หลักทั้งหมดรองรับฟังก์ชั่น outerHTML สำหรับฉันแล้วดูเหมือนว่าข้อมูลนี้เพียงพอแล้ว โดยส่วนตัวฉันจะเลือกที่จะจดจำสิ่งนี้:

// 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('');

แก้ไข : สถิติการสนับสนุนขั้นพื้นฐานสำหรับelement.outerHTML

• Firefox (Gecko): 11 .... เปิดตัว 2012-03-13
• Chrome: 0.2 ............... เปิดตัว 2008-09-02
• Internet Explorer 4.0 ... เปิดตัวในปี 1997
• Opera 7 ...................... เปิดตัว 2003-01-28
• Safari 1.3 ................... เปิดตัวปี 2006-01-12

ไม่จำเป็นต้องสร้างฟังก์ชั่นสำหรับมัน เพียงทำแบบนี้:

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

(คอนโซลของเบราว์เซอร์ของคุณจะแสดงสิ่งที่บันทึกไว้โดยวิธีเบราว์เซอร์ล่าสุดส่วนใหญ่ตั้งแต่ปี 2009 มีคุณสมบัตินี้)

ความมหัศจรรย์นี้จบลงแล้ว:

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

การลอกแบบหมายความว่าคุณไม่ได้รบกวน DOM จริงๆ เรียกใช้โดยไม่ใช้มันและคุณจะเห็นpแท็กแทรกก่อน / หลังการเชื่อมโยงหลายมิติทั้งหมด (ในตัวอย่างนี้) ซึ่งไม่พึงประสงค์ .clone()ดังนั้นใช่การใช้งาน

วิธีการทำงานคือใช้aแท็กแต่ละตัวสร้างโคลนใน RAM ล้อมรอบด้วยpแท็กรับพาเรนต์ของมัน (หมายถึงpแท็ก) จากนั้นรับinnerHTMLคุณสมบัติของมัน

แก้ไข : เอาคำแนะนำและเปลี่ยนdivแท็กเป็นpแท็กเพราะมันพิมพ์น้อยลงและใช้งานได้เหมือนกัน

สิ่งที่เกี่ยวกับ: prop('outerHTML')?

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

และเพื่อตั้ง:

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

มันใช้งานได้สำหรับฉัน

PS : นี้จะถูกเพิ่มในjQuery 1.6

ขยาย jQuery:

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

และใช้มันเช่นนี้ $("#myTableRow").outerHTML();

ฉันเห็นด้วยกับ Arpan (13 ธันวาคม '10 5:59)

วิธีการของเขาในการทำมันเป็นวิธีที่ดีกว่ามากในการทำเช่นคุณไม่ได้ใช้โคลน วิธีการโคลนนั้นใช้เวลานานมากหากคุณมีองค์ประกอบย่อย ๆ และไม่มีใครสนใจว่า IE มีouterHTMLคุณสมบัติ (จริง ๆ แล้ว IE มีเทคนิคบางอย่างที่เป็นประโยชน์ขึ้นมา)

แต่ฉันอาจจะสร้างสคริปต์ของเขาแตกต่างกันเล็กน้อย:

$.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;
    }
};

หากต้องการเป็น jQuery-esque อย่างแท้จริงคุณอาจต้องการouterHTML()เป็นผู้ทะเยอทะยานและเป็นผู้ตั้งตัวและมีพฤติกรรมคล้ายกันhtml()มากที่สุด:

$.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;
}

ตัวอย่างการทำงาน: http://jsfiddle.net/AndyE/WLKAa/

สิ่งนี้ช่วยให้เราสามารถส่งผ่านข้อโต้แย้งไปouterHTMLได้

• ฟังก์ชั่นที่ยกเลิกได้function (index, oldOuterHTML) { }- ซึ่งค่าที่ส่งคืนจะกลายเป็น HTML ใหม่สำหรับองค์ประกอบ (เว้นแต่falseจะถูกส่งคืน)
• สตริงซึ่งจะถูกตั้งแทน HTML ของแต่ละองค์ประกอบ

สำหรับข้อมูลเพิ่มเติมโปรดดูที่เอกสาร jQuery html()สำหรับ

นอกจากนี้คุณยังสามารถใช้รับ (เรียกองค์ประกอบ DOM ที่ตรงกับวัตถุ jQuery)

เช่น:

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

เป็นวิธีการขยาย:

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

หรือ

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

มีหลายทางเลือกและส่งคืน html ภายนอกขององค์ประกอบที่ตรงกันทั้งหมด

$('input').outerHTML()

กลับ:

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

ในการสร้างปลั๊กอิน jQuery แบบเต็มให้.outerHTMLเพิ่มสคริปต์ต่อไปนี้ลงในไฟล์ js ใด ๆ และรวมไว้หลัง jQuery ในส่วนหัวของคุณ:

_{อัปเดต}เวอร์ชันใหม่มีการควบคุมที่ดีขึ้นรวมถึงบริการที่เป็นมิตรกับ jQuery Selector! :)

;(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);

สิ่งนี้จะช่วยให้คุณไม่เพียง แต่รับส่วนนอก HTML ขององค์ประกอบหนึ่งเท่านั้น แต่ยังได้รับการส่งคืนอาร์เรย์หลายองค์ประกอบพร้อมกัน! และสามารถใช้ได้ทั้งในรูปแบบมาตรฐาน jQuery เช่น:

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

สำหรับองค์ประกอบหลายรายการ

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

ตัวอย่างโค้ด:

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>

คุณสามารถทำได้ด้วยวิธีนี้

document.getElementById(id).outerHTML

โดยที่ id คือ id ขององค์ประกอบที่คุณกำลังมองหา

ฉันใช้โซลูชันของเจสสิก้า (ซึ่งแก้ไขโดย Josh) เพื่อรับ outerHTML เพื่อทำงานกับ Firefox อย่างไรก็ตามปัญหาคือรหัสของฉันแตกเพราะโซลูชันของเธอห่อองค์ประกอบไว้ใน DIV การเพิ่มโค้ดอีกหนึ่งบรรทัดช่วยแก้ปัญหานั้นได้

รหัสต่อไปนี้จะให้ outerHTML ของคุณออกจากโครงสร้าง DOM ไม่เปลี่ยนแปลง

$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;
    }
}

และใช้แบบนี้: $ ("# myDiv") outerHTML ();

หวังว่าใครบางคนพบว่ามันมีประโยชน์!

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

ซอที่นี่: http://jsfiddle.net/ezmilhouse/Mv76a/

หากสถานการณ์จำลองผนวกแถวใหม่แบบไดนามิกคุณสามารถใช้สิ่งนี้:

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

.myrowเป็น ClassName <tr>ของ มันทำให้สำเนาของแถวสุดท้ายและแทรกว่าเป็นแถวสุดท้ายใหม่ สิ่งนี้สามารถใช้งานได้ในIE7ในขณะที่[0].outerHTMLวิธีนี้ไม่อนุญาตให้มีการมอบหมายในIE7

node.cloneNode () ดูเหมือนจะไม่ค่อยแฮ็ค คุณสามารถโคลนโหนดและผนวกเข้ากับอิลิเมนต์พาเรนต์ใด ๆ ที่ต้องการและจัดการกับมันโดยการจัดการคุณสมบัติของแต่ละบุคคลแทนที่จะต้องดำเนินการเช่นการแสดงออกปกติบนมันหรือเพิ่มเข้าไปใน DOM แล้วจัดการมัน afterwords

ที่กล่าวว่าคุณสามารถทำซ้ำคุณลักษณะขององค์ประกอบเพื่อสร้างการแสดงสตริง HTML ของมัน ดูเหมือนว่านี่จะเป็นวิธีการใช้งานฟังก์ชั่น outerHTML ใด ๆ ที่เป็น jQuery เพื่อเพิ่ม

ฉันใช้โซลูชันของ Volomike อัปเดตโดยเจสสิก้า เพียงเพิ่มการตรวจสอบเพื่อดูว่ามีองค์ประกอบอยู่หรือไม่และทำให้ว่างเปล่าในกรณีที่ไม่มี

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

แน่นอนใช้มันเหมือน:

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

คุณสามารถค้นหาตัวเลือก. outerHTML () ที่ดีได้ที่นี่https://github.com/darlesson/jquery-outerhtml

ซึ่งแตกต่างจาก. html () ที่คืนค่าเฉพาะเนื้อหา HTML ขององค์ประกอบ, รุ่นของ. outerHTML () นี้จะคืนค่าองค์ประกอบที่เลือกและเนื้อหา HTML หรือแทนที่เป็นวิธีการ. แทนที่ด้วย () แต่ด้วยความแตกต่างที่ช่วยให้การแทนที่ HTML การผูกมัด

ตัวอย่างสามารถเห็นได้ใน URL ด้านบน

โปรดทราบว่าโซลูชันของ Josh ใช้งานได้กับองค์ประกอบเดียวเท่านั้น

อาจกล่าวได้ว่า "outer" HTML นั้นเหมาะสมจริงๆเมื่อคุณมีองค์ประกอบเดียว แต่มีสถานการณ์ที่เหมาะสมที่จะรับรายการองค์ประกอบ HTML และเปลี่ยนเป็นมาร์กอัพ

การขยายโซลูชันของ Josh สิ่งนี้จะจัดการองค์ประกอบหลายอย่าง:

(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);

แก้ไข: ปัญหาอื่นที่แก้ไขโดย Josh ได้รับการแก้ไขแล้วให้ดูความคิดเห็นด้านบน

แก้ปัญหาที่คล้ายกันด้วยการเพิ่มremove()วัตถุ DOM ชั่วคราว

ฉันได้ทำการทดสอบอย่างง่ายนี้โดย outerHTML เป็นโซลูชัน tokimon (โดยไม่ต้องโคลน) และ outerHTML2 เป็นโซลูชัน jessica (โคลน)

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");

และผลลัพธ์ในเบราว์เซอร์โครเมียมของฉัน (เวอร์ชัน 20.0.1132.57 (0)) คือ

outerHTML: 81ms
outerHTML2: 439ms

แต่ถ้าเราใช้โซลูชัน tokimon ที่ไม่มีฟังก์ชั่น outerHTML แบบดั้งเดิม (ซึ่งตอนนี้ได้รับการสนับสนุนในเกือบทุกเบราว์เซอร์)

เราได้รับ

outerHTML: 594ms
outerHTML2: 332ms

และจะมีลูปและองค์ประกอบมากขึ้นในตัวอย่างโลกแห่งความจริงดังนั้นส่วนผสมที่ลงตัวจะเป็น

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

ดังนั้นวิธีการโคลนจึงเร็วกว่าวิธีการห่อ / แกะ
(jQuery 1.7.2)

นี่คือปลั๊กอิน outerHTML ที่ปรับให้เหมาะสมที่สุดสำหรับ jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => ตัวอย่างโค้ดแบบเร็ว 2 รายการไม่สามารถทำงานร่วมกับเบราว์เซอร์บางตัวเช่น 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 => ฉันไม่เห็นด้วยกับคุณ outerHMTL ไม่ต้องการ getter และ setter: jQuery ให้เรา 'replaceWith' แล้ว ...

@mindplay => ทำไมคุณถึงเข้าร่วม outerHTML ทั้งหมด? jquery.html ส่งคืนเฉพาะเนื้อหา HTML ขององค์ประกอบ FIRST

(ขออภัยมีชื่อเสียงไม่เพียงพอที่จะเขียนความคิดเห็น)

สั้นและหวาน

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

หรือเพิ่มความหวานด้วยฟังก์ชั่นลูกศร

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

หรือไม่มี jQuery เลย

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

หรือถ้าคุณไม่ชอบวิธีการนี้ให้ตรวจสอบว่า

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

ค่อนข้างง่ายด้วย JavaScript วานิลลา ...

document.querySelector('#selector')

นี่เป็นสิ่งที่ยอดเยี่ยมสำหรับการเปลี่ยนแปลงองค์ประกอบใน dom แต่ไม่ได้ผลเช่นเมื่อส่งผ่านสตริง html ไปยัง jquery ดังนี้:

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

หลังจากการจัดการบางอย่างฉันได้สร้างฟังก์ชั่นที่ช่วยให้การทำงานด้านบนเช่นสำหรับสตริง html:

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

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

ฉันเจอสิ่งนี้ในขณะที่มองหาคำตอบสำหรับปัญหาของฉันซึ่งฉันพยายามลบแถวของตารางแล้วเพิ่มกลับเข้าไปที่ด้านล่างของตาราง (เพราะฉันกำลังสร้างแถวข้อมูลแบบไดนามิก แต่ต้องการแสดง 'เพิ่มใหม่ แถวประเภทระเบียน 'ที่ด้านล่าง)

ฉันมีปัญหาเดียวกันเมื่อมันส่งคืน InnerHtml ดังนั้นจึงไม่มีแท็ก TR ซึ่งถือ ID ของแถวนั้นและหมายความว่าเป็นไปไม่ได้ที่จะทำซ้ำขั้นตอน

คำตอบที่ฉันพบคือremove()ฟังก์ชั่นjquery ส่งคืนองค์ประกอบที่มันลบออกเป็นวัตถุ ดังนั้นในการลบและเพิ่มแถวใหม่มันง่ายอย่างนี้ ...

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

หากคุณไม่ได้ลบวัตถุ แต่ต้องการคัดลอกไปที่อื่นให้ใช้clone()ฟังก์ชั่นแทน

ปลั๊กอิน jQuery เป็นชวเลขเพื่อรับองค์ประกอบ HTML ทั้งหมดโดยตรง:

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

และใช้มันเช่นนี้ $(".element").outerHTML();

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

โดยที่ 'x' คือหมายเลขโหนดเริ่มต้นด้วย 0 เป็นหมายเลขแรกควรได้รับโหนดที่ถูกต้องที่คุณต้องการหากคุณกำลังพยายามหาหมายเลขที่ระบุ หากคุณมีโหนดลูกคุณควรใส่ ID ในสิ่งที่คุณต้องการจริงๆเพื่อให้เป็นศูนย์ในอันนั้น ใช้วิธีการนั้นและ 'x' ไม่ทำงานได้ดีสำหรับฉัน

ทางออกที่ง่าย

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

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

บางทีฉันอาจไม่เข้าใจคำถามของคุณอย่างถูกต้อง แต่สิ่งนี้จะได้รับ html ขององค์ประกอบที่เลือกขององค์ประกอบ

นั่นคือสิ่งที่คุณหลังจาก?