자바 스크립트에서 DOM 요소에 대한 HTML을 얻는 방법

다음 HTML이 있다고 상상해보십시오.

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

div 자체를 포함하여 div에 대한 HTML을 얻고 싶습니다. 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합니다. 일단 당신이 HTML을 검색하기 위해 'e.innerHTML'을하세요.

<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 크로스 브라우저 호환되지 않습니다.

더 가벼운 풋 프린트를 원하지만 더 긴 스크립트를 원한다면 innerHTML 요소를 가져 와서 빈 부모 만 만들고 복제하십시오.

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

부모 유형의 가짜 빈 요소를 만들고 그것에 innerHTML을 사용한 다음 요소를 다시 일반 dom에 다시 연결합니다.

크로스 브라우저가 되려면 이와 같은 것을 원할 것입니다.

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

    return container.innerHTML;
}

오래된 질문이지만 새로운 이민자를 위해 :

document.querySelector('div').outerHTML

element.outerHTML 지원에 따라 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;