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

Question

I am trying to replicate the following HTML code by using only Javascript (no jQuery). I want the buttons to appear as a group,but it looks like they are being appended individually. I've read up on bootstrap button groups ( http://getbootstrap.com/components/#btn-groups ) and the btn-group classs is being called on the html. So therefore my javascript DOM manipulation is incorrect.

Can someone help me to understand why my buttons are not appearing correctly? Please note that this is only a snippet of the entire code. the HTML elements are nested in a "row" div and "container" 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 link: https://jsfiddle.net/bchang89/eh7uhs43/2/

Answer 1

You can use cloneNode() on the parent element .btn-group and set it to a deep copy. Deep copy will create a copy of the target node as well as it's descendants. The only limitation is that it will not copy any event listeners added to either the target node or it's descendants.

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

Snippet

 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>