[javascript] DOM 노드의 문자열 표현 가져 오기

Javascript : 노드 (요소 또는 문서)의 DOM 표현이 있고 그 문자열 표현을 찾고 있습니다. 예 :

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

산출해야합니다 :

get_string(el) == "<p>Test</p>";

나는 사소한 일을 놓치고 있다는 강한 느낌을 가지고 있지만 IE, FF, Safari 및 Opera에서 작동하는 방법을 찾지 못했습니다. 따라서 outerHTML은 옵션이 아닙니다.

답변

임시 부모 노드를 만들고 그 내부 HTML 콘텐츠를 가져올 수 있습니다.

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

편집 :
outerHTML에 대한 아래 답변을 참조하십시오. el.outerHTML 만 있으면됩니다.

답변

당신이 찾고있는 것은 ‘outerHTML’이지만 이전 브라우저와 호환되지 않는 대체 coz가 필요합니다.

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

내 jQuery 플러그인은 여기에서 찾을 수 있습니다. 선택한 요소의 외부 HTML 가져 오기

답변

나는 이것을 위해 복잡한 스크립트가 필요하다고 생각하지 않습니다. 그냥 사용

get_string=(el)=>el.outerHTML;

답변

FF에서 XMLSerializer객체를 사용하여 XML을 문자열로 직렬화 할 수 있습니다 . IE는 xml노드 의 속성을 제공 합니다. 따라서 다음을 수행 할 수 있습니다.

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

답변

Element # outerHTML 사용 :

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

DOM 요소를 작성하는데도 사용할 수 있습니다. Mozilla 문서에서 :

요소 DOM 인터페이스의 outerHTML 속성은 하위 요소를 포함하여 요소를 설명하는 직렬화 된 HTML 조각을 가져옵니다. 지정된 문자열에서 구문 분석 된 노드로 요소를 대체하도록 설정할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

답변

element.outerHTML을 사용하여 외부 태그 및 속성을 포함하여 요소의 전체 표현을 가져옵니다.

답변

요소에 부모가있는 경우

element.parentElement.innerHTML