javascript DOM操作を使用してdiv要素にhtml要素を追加する

Question

Javascript（jQueryなし）のみを使用して次のHTMLコードを複製しようとしています。 ボタンをグループとして表示したいのですが、ボタンが個別に追加されているように見えます。 ブートストラップのボタングループ（http://getbootstrap.com/components/#btn-groups）を読み、btn-groupクラスがhtmlで呼び出されています。したがって、私のjavascriptのDOM操作が間違っています。

ボタンが正しく表示されない理由を理解できますか？これはコード全体のスニペットに過ぎないことに注意してください。 HTML要素は「行」divと「コンテナ」divにネストされます。

HTML

 <div> 
    <div class="btn-group btn-group-lg"> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
    </div> 
    </div> 

Javascriptを

var divTwo = document.createElement('div'); 
row.appendChild(divTwo); 
col.appendChild(divTwo); 

var btnGroupFour = document.createElement('div'); 
btnGroupFour.className = 'btn-group btn-group-lg'; 
divTwo.appendChild(btnGroupFour); 


var btnLeft = document.createElement('button'); 
var textLeft = document.createTextNode('Left'); 
btnLeft.appendChild(textLeft); 
btnLeft.className = 'btn btn-default'; 

var btnMiddle = document.createElement('button'); 
var textMiddle = document.createTextNode('Middle'); 
btnMiddle.appendChild(textMiddle); 
btnMiddle.className = 'btn btn-default'; 

var btnRight = document.createElement('button'); 
var textRight = document.createTextNode('Right'); 
btnRight.appendChild(textRight); 
btnRight.className = 'btn btn-default'; 

btnGroupFour.appendChild(btnLeft); 
btnGroupFour.appendChild(btnMiddle); 
btnGroupFour.appendChild(btnRight); 

jsfiddleリンク： https://jsfiddle.net/bchang89/eh7uhs43/2/

Answer 1

あなたは親要素.btn-groupにcloneNode()を使用して、ディープコピーに設定することができます。ディープ・コピーでは、ターゲット・ノードのコピーとその子孫が作成されます。唯一の制限は、ターゲットノードまたはその子孫のいずれかに追加されたイベントリスナーをコピーしないことです。

// Collect all .btn-group into a NodeList (btnGrp) 
var btnGrp = document.querySelectorAll('.btn-group'); 

// Determine the last .btn-grp by using the .length property -1 
var lastGrp = btnGrp.length - 1; 

// Reference the index in the btnGrp NodeList 
var tgt = btnGrp[lastGrp]; 

// Create a clone of tgt and set the parameter to true for deep copy 
var dupe = tgt.cloneNode(true); 

// Append the clone to the body or any other element you wish. 
document.body.appendChild(dupe); 

EDIT

// Appendinding to `.container` since it looks better and makes more sense. 
var box = document.querySelector('.container'); 
box.appendChild(dupe); 

Fiddle

スニペット

var box = document.querySelector('.container'); 
 
var btnGrp = document.querySelectorAll('.btn-group'); 
 
var lastGrp = btnGrp.length - 1; 
 
var tgt = btnGrp[lastGrp]; 
 
var dupe = tgt.cloneNode(true); 
 
box.appendChild(dupe);

.btn-default { 
 
    color: #007aff; 
 
    background-color: #fff; 
 
    border-color: #007aff; 
 
} 
 
.btn-default:hover, 
 
.btn-default:focus, 
 
.btn-default:active { 
 
    color: #fff; 
 
    background-color: #007aff; 
 
    border-color: #007aff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-default">1</button> 
 
      <button type="button" class="btn btn-default">2</button> 
 
      <button type="button" class="btn btn-default">3</button> 
 
      <button type="button" class="btn btn-default">4</button> 
 
     </div> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-default">5</button> 
 
      <button type="button" class="btn btn-default">6</button> 
 
      <button type="button" class="btn btn-default">7</button> 
 
     </div> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-default">8</button> 
 
     </div> 
 
     </div> 
 
     <hr> 
 
     <div> 
 
     <div class="btn-group btn-group-lg"> 
 
      <button type="button" class="btn btn-default">Left</button> 
 
      <button type="button" class="btn btn-default">Middle</button> 
 
      <button type="button" class="btn btn-default">Right</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>