使用Javascript DOM操作添加html元素到div

Question

我想通過僅使用Javascript（不使用jQuery）複製以下HTML代碼。 我希望按鈕顯示爲一個組，但它看起來像是單獨附加的。 我讀過引導按鈕組（http://getbootstrap.com/components/#btn-groups），並且在html上調用了btn-group類。所以，我的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>