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

Question

我正在尝试仅使用 Javascript（无 jQuery）来复制以下 HTML 代码。 我希望按钮显示为一个组，但看起来它们是单独附加的。 我已经阅读了引导按钮组（http://getbootstrap.com/components/#btn-groups），并且在 html 上调用了 btn-group 类。因此，我的 javascript DOM 操作不正确。

谁能帮我理解为什么我的按钮显示不正确？请注意，这只是整个代码的一个 sn-p。 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);

编辑

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