Verwenden von Javascript DOM-Manipulation zum Hinzufügen von HTML-Elementen zu div

Question

Ich versuche, den folgenden HTML-Code mit nur Javascript (keine jQuery) zu replizieren. Ich möchte die Schaltflächen als eine Gruppe angezeigt werden, aber es sieht so aus, als ob sie einzeln angehängt werden. Ich habe auf Bootstrap-Button-Gruppen (http://getbootstrap.com/components/#btn-groups) gelesen und die Btn-Group-Klassen wird auf dem HTML aufgerufen. Daher ist meine Javascript-DOM-Manipulation falsch.

Kann mir jemand helfen zu verstehen, warum meine Tasten nicht korrekt angezeigt werden? Bitte beachten Sie, dass dies nur ein Ausschnitt des gesamten Codes ist. Die HTML-Elemente sind in einem "row" div und "container" div geschachtelt.

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

Answer 1

Sie cloneNode() auf dem übergeordneten Element verwenden können .btn-group und in eine tiefe Kopie gesetzt. Deep Copy erstellt eine Kopie des Zielknotens und seiner Nachkommen. Die einzige Einschränkung besteht darin, dass keine Ereignis-Listener kopiert werden, die entweder dem Zielknoten oder seinen Nachkommen hinzugefügt wurden.

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

Schnipsel

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>