들여 쓰기/간격이있는 DOM에 요소 추가

Question

Here is an example. 콘솔에서 결과를 확인하십시오. 처음 두 개의 div (첨부되지 않음, 콘솔의 <script> 위)에는 적절한 간격과 들여 쓰기가 있습니다. 그러나 두 번째 두 div은 완전히 동일하지만 추가되었지만 원본과 동일한 서식 또는 공백을 표시하지 않습니다. 나는 그것이

<div> 
    <div></div> 
</div> 

같이 할 때 입력

var newElem = document.createElement('div'); 
document.body.appendChild(newElem); 
var another = document.createElement('div'); 
newElem.appendChild(another); 
console.log(document.body.innerHTML); 

예를 들어

사이 적절한 공백을 생성 할 수있는 방법이 있나요 출력

<div><div></div></div> 

를 제공 추가 요소를 가져오고 innerHTML (또는 possib 르 비슷한 의미)? 나는 작업중인 페이지의 계층과 구조를 시각적으로 표시 할 수 있어야합니다.

나는 실제 HTML에 요소 이내에 추가 시도했지만 동일한 동작을 가지고

내가 lincolnk이 제안 텍스트 노드와 줄 바꿈을 사용하여 그 일에 괜찮을 거라고하지만 필요 다른 요소는 계층 구조

의 다른 수준에 있기 때문에 내가 어떤 jQuery를이

Answer 1

나는 당신이 DOM에 요소를 추가 할 수 있도록 요구하고 생각 문자열 document.body.innerHTML에서 반환하도록 당신이 바로, 텍스트 편집기에 입력 한 것처럼 들여 쓰기 등으로 포맷됩니다 ?

그렇다면,이 같은 작동 될 수 있습니다

function indentedAppend(parent,child) { 
    var indent = "", 
     elem = parent; 

    while (elem && elem !== document.body) { 
     indent += " "; 
     elem = elem.parentNode; 
    } 

    if (parent.hasChildNodes() && parent.lastChild.nodeType === 3 && /^\s*[\r\n]\s*$/.test(parent.lastChild.textContent)) { 
     parent.insertBefore(document.createTextNode("\n" + indent), parent.lastChild); 
     parent.insertBefore(child, parent.lastChild); 
    } else { 
     parent.appendChild(document.createTextNode("\n" + indent)); 
     parent.appendChild(child); 
     parent.appendChild(document.createTextNode("\n" + indent.slice(0,-2))); 
    } 

} 

데모 : http://jsbin.com/ilAsAki/28/edit

당신이 그것으로 연주해야 할 수도 있습니다, 그래서 너무 많이, 그것으로 생각을 넣어하지했지만, 그것은이다 적어도 출발점.

또한, 나는 당신이 사용하고있는 것처럼 2 칸 들여 쓰기를 가정했습니다.

아, 그리고 <pre> 태그 또는 HTML의 공백을 유지하기 위해 CSS가 설정된 모든 위치에서이 값을 사용할 때주의해야합니다.

Answer 2

당신은 직접 문자열을 추가 할 document.createTextNode()을 사용할 수 없습니다하십시오 같은 .createTextNode(' </br>')을 사용할 수 없습니다 의미 동적 결과에 영향을 미친다.

var ft = document.createElement('div'); 
document.body.appendChild(ft); 
document.body.appendChild(document.createTextNode(' ')); 
var another = document.createElement('div'); 
document.body.appendChild(another); 
console.log(document.body.innerHTML);