2010-11-21 5 views
12

내가 할 수있는 일은 자바 스크립트 HTMLElement 객체에서 문자열을 만드는 것입니다. 예를 들어 :HTMLDivElement에서 문자열 만들기

var day = document.createElement("div"); 
day.className = "day"; 
day.textContent = "Random Text"; 

지금 우리가 day HTMLDivElement와 개체를 만들 수 있습니다 그것은 문자열로 인쇄 할 수 있습니까? 예 :

<div class="day">Random Text</div> 

답변

17

Gump 래퍼의 Variant. 구현시 대상 노드가 문서에서 들어 올려지기 때문에.

function nodeToString (node) { 
    var tmpNode = document.createElement("div"); 
    tmpNode.appendChild(node.cloneNode(true)); 
    var str = tmpNode.innerHTML; 
    tmpNode = node = null; // prevent memory leaks in IE 
    return str; 
} 

가 결과 화면에 문자열 (재 : 탈출) 인쇄하려면

var escapedStr = nodeToString(node).replace("<" , "&lt;").replace(">" , "&gt;"); 
outputNode.innerHTML += escapedStr; 

주 등 "클래스", "ID", 같은 속성이 제대로 의문의 여지가도 캐릭터 라인된다.

+0

간단하면서도 효과적이었습니다. 내가 찾고 있었던 것. Firefox에서는 outerHTML 메소드가 지원되지 않습니다. 감사 –

1

문자열을 직접 구문 분석 할 수있는 경우 왜 createElement을 사용 하시겠습니까? 처럼 : var string = '<div class="' + class + '">' + text + '</div>';

+0

op와 같이해야 할 이유가 많이 있습니다. – Madbreaks

2

는이처럼 만든 요소에 텍스트를 추가 할 텍스트 노드를 작성해야

var day = document.createElement("div"); 
day.className = "day"; 
// create text node 
var txt = document.createTextNode('Random Text'); 
// add text to div now 
day.appendChild(txt); 
// append to body 
document.body.appendChild(day); 
12

당신은 (pure.js에서 촬영)이 기능

function outerHTML(node){ 
return node.outerHTML || new XMLSerializer().serializeToString(node); 
} 
5

을 사용할 수 있습니다 해당 요소를 다른 요소로 래핑하고 innerHTML을 사용하면됩니다.

var wrapper = document.createElement("div"); 
wrapper.appendChild(day); 
var str = wrapper.innerHTML; 
관련 문제