วิธีรับ HTML สำหรับองค์ประกอบ DOM ใน javascript

ลองนึกภาพว่าฉันมี HTML ต่อไปนี้:

<div><span><b>This is in bold</b></span></div>

ฉันต้องการรับ HTML สำหรับ div รวมถึง div ด้วย Element.innerHTML ส่งคืนเฉพาะ:

<span>...</span>

ความคิดใด ๆ ? ขอบคุณ

เมื่อขยายคำตอบของ jldupont คุณสามารถสร้างองค์ประกอบการตัดได้ทันที:

var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);

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

ใช้outerHTML:

var el = document.getElementById( 'foo' );
alert( el.outerHTML );

ขั้นแรกใส่องค์ประกอบที่ล้อมรอบdivคำถามใส่idแอตทริบิวต์ในองค์ประกอบแล้วใช้getElementByIdกับองค์ประกอบนั้น: เมื่อคุณได้รับสัญญาแล้วให้ทำ "e.innerHTML" เพื่อดึง HTML

<div><span><b>This is in bold</b></span></div>

=> <div id="wrap"><div><span><b>This is in bold</b></span></div></div>

แล้ว:

var e=document.getElementById("wrap");
var content=e.innerHTML;

โปรดทราบว่าouterHTMLไม่สามารถใช้งานข้ามเบราว์เซอร์ได้

หากคุณต้องการให้มีขนาดเล็กลง แต่มีสคริปต์ที่ยาวขึ้นให้รับองค์ประกอบภายใน HTML และสร้างและโคลนพาเรนต์ว่างเท่านั้น -

function getHTML(who,lines){
    if(!who || !who.tagName) return '';

    var txt, ax, str, el= document.createElement('div');
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    ax= txt.indexOf('>')+1;
    str= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);

    el= null;
    return lines? str.replace(/> *</g,'>\n<'): str;
    //easier to read if elements are separated
}

var x = $('#container').get(0).outerHTML;

เนื่องจาก outerHTML เป็น IE เท่านั้นให้ใช้ฟังก์ชันนี้:

function getOuterHtml(node) {
    var parent = node.parentNode;
    var element = document.createElement(parent.tagName);
    element.appendChild(node);
    var html = element.innerHTML;
    parent.appendChild(node);
    return html;
}

สร้างองค์ประกอบที่ว่างเปล่าปลอมของประเภท parent และใช้ innerHTML จากนั้นแนบองค์ประกอบกลับเข้าไปในโดมปกติ

คุณจะต้องการสิ่งนี้เพื่อให้เป็นข้ามเบราว์เซอร์

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

คำถามเก่า แต่สำหรับผู้มาใหม่ที่เข้ามา:

document.querySelector('div').outerHTML

กำหนดฟังก์ชัน outerHTML ตามการสนับสนุน element.outerHTML:

var temp_container = document.createElement("div"); // empty div not added to DOM
if (temp_container.outerHTML){
    var outerHTML = function(el){return el.outerHTML||el.nodeValue} // e.g. textnodes do not have outerHTML
  } else { // when .outerHTML is not supported
    var outerHTML = function(el){
      var clone = el.cloneNode(true);
      temp_container.appendChild(clone);
      outerhtml = temp_container.innerHTML;
      temp_container.removeChild(clone);
      return outerhtml;
    };
  };

var el = document.getElementById('foo');
el.parentNode.innerHTML;