<br> divに追加されていません

Question

ogres = document.getElementById('${contentID}') 

let prettify = streamArray[streamArray.length - 1].split(/--/), 
            layers = document.createTextNode(prettify[0]), 
            onions = document.createTextNode(prettify[1]), 
            breaking = document.createElement('br'); 

prettifyという2つの要素の配列があります。

私は間違いなくprettify[0]とprettify[1]私が望む要素であることを確認しているので、私はonionsとdiv要素に追加するテキストノードであるlayersにそれらを作ります。

あなたは私が作成したブレーク要素であるbreakingも持っていて、divにも追加しています。

私はdivをorgesとしました。 htmlページの

ogres.appendChild(layers); 
ogres.appendChild(breaking); 
ogres.appendChild(onions); 
ogres.appendChild(breaking); 

、これが作成されます：

layersonions 
<br> 

1：なぜこれが

2に起こっている：私はこれを行う際にいくつかの未知の理由で今

方法私はそれを修正するのですか？

3：いいえ、私はこれらの変数名を維持する上で計画していないが、彼らは楽しいです：あなたは要素を作成するためにdocument.createElement('br');を使用する場合は3

Answer 1

、それは親の2番目のノードとして追加されます。

再度同じ参照を使用しているため、既存の要素を切り離して新しい位置に追加するだけです。

要素に対する単一の参照です。これを修正するには、その場で要素を作成して追加する必要があります。

ogres.appendChild(layers); 
ogres.appendChild(document.createElement('br')); 
ogres.appendChild(onions); 
ogres.appendChild(document.createElement('br')); 

appendChild

あなたはまだ、あなたが挿入する前に既存のノードを複製しますcloneNodeメソッドを使用することができ、変数の参照を使用したい場合。

ogres.appendChild(layers); 
ogres.appendChild(breaking); 
ogres.appendChild(onions); 
ogres.appendChild(breaking.cloneNode(false)); 

cloneNode