html öğelerini div'e eklemek için Javascript DOM kullanımını kullanma

Question

Aşağıdaki HTML kodunu yalnızca Javascript (jQuery yok) kullanarak çoğaltmaya çalışıyorum. Düğmelerin bir grup olarak görünmesini istiyorum, ancak ayrı ayrı eklendiklerine benziyor. Önyükleme düğmesi gruplarını (http://getbootstrap.com/components/#btn-groups) okudum ve btn grubu sınıfları html'de çağrılıyor. Bu yüzden javascript DOM manipülasyonum yanlış.

Düğmelerimin neden düzgün görünmediğini anlamak için bana yardımcı olabilir misiniz? Lütfen bunun yalnızca tüm kodun bir pasajı olduğunu unutmayın. HTML elemanları bir "satır" div ve "container" div içine yerleştirilmiştir.

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 linki: https://jsfiddle.net/bchang89/eh7uhs43/2/

Answer 1

Sen üst öğesine .btn-group üzerinde cloneNode() kullanmak ve derin bir kopyasına ayarlayabilirsiniz. Derin kopya, hedef düğümün yanı sıra torunlarının bir kopyasını oluşturacaktır. Tek sınırlama, herhangi bir olay dinleyicisinin hedef düğüme veya onun soyuna eklenmesine izin vermemesidir.

// 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); 

DÜZENLEME

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

Fiddle

Pasaj

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>