Cách lấy HTML cho phần tử DOM trong javascript

Hãy tưởng tượng tôi có HTML sau:

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

Tôi muốn lấy HTML cho div, bao gồm cả chính div. Element.innerHTML chỉ trả về:

<span>...</span>

Bất kỳ ý tưởng? Cảm ơn

Mở rộng câu trả lời của jldupont, bạn có thể tạo một phần tử gói ngay lập tức:

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

Tôi đang sao chép phần tử để tránh phải xóa và lắp lại phần tử trong tài liệu thực tế. Tuy nhiên, điều này có thể tốn kém nếu phần tử bạn muốn in có một cây rất lớn bên dưới nó.

Sử dụng outerHTML:

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

Đầu tiên, đặt phần tử bao bọc divcâu hỏi được đề cập, đặt một idthuộc tính trên phần tử đó và sau đó sử dụng getElementByIdnó: khi bạn đã có lement, chỉ cần thực hiện 'e.innerHTML` để truy xuất 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>

và sau đó:

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

Lưu ý rằng outerHTMLkhông tương thích với nhiều trình duyệt.

Nếu bạn muốn có một dấu chân nhẹ hơn, nhưng một kịch bản dài hơn, có được những yếu tố innerHTML và chỉ tạo ra và sao chép các sản phẩm nào phụ huynh

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;

vì externalHTML chỉ dành cho IE, hãy sử dụng chức năng này:

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

tạo một phần tử rỗng không có thật của kiểu cha và sử dụng innerHTML trên đó rồi gắn lại phần tử đó vào dom bình thường

Bạn sẽ muốn một cái gì đó như thế này để nó được trình duyệt chéo.

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

    return container.innerHTML;
}

câu hỏi cũ nhưng dành cho những người mới đến:

document.querySelector('div').outerHTML

định nghĩa hàm ngoàiHTML dựa trên sự hỗ trợ cho 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;