0

ここに例があります。コンソールで結果を確認します。最初の 2 つdivの s (追加されていません。<script>コンソールの の上) には、適切な間隔とインデントがあります。ただし、2 番目の 2 つdivの s は、完全に同じであるが追加されているにもかかわらず、オリジナルと同じフォーマットまたは空白を示していません。

たとえば、入力

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>

のようにしたいとき

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

追加された要素間に適切な空白を生成し、それを使用して取得するときにその空白を保持する方法はありますかinnerHTML(または同様の手段)? 作業中のページの階層と構造を視覚的に表示できる必要があります。

実際のHTMLにある要素内に追加しようとしましたが、同じ動作をします

lincolnk が提案したように、テキスト ノードと改行を使用しても問題ありませんが、動的な結果に影響を与える必要があります。つまり、.createTextNode(' </br>')異なる要素が階層の異なるレベルにあるため、同じものを使用することはできません。

jQueryなしでお願いします

4

2 に答える 2

0

document.createTextNode()文字列を直接追加するために使用できます。

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);
于 2013-11-01T23:00:42.797 に答える