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

我试图仅使用Javascript（无jQuery）复制以下HTML代码。 我希望按钮显示为一个组，但看起来它们是单独附加的。 我已经阅读了bootstrap按钮组（）的内容，并且在html上调用了btn组类。因此，我的javascript DOM操作是不正确的

有人能帮我理解为什么我的按钮显示不正确吗？请注意，这只是整个代码的一个片段。HTML元素嵌套在“row”div和“container”div中

HTML

JSIDLE链接：

您可以在父元素

上使用.btn group

，并将其设置为深度副本。深度复制将创建目标节点及其子节点的副本。唯一的限制是它不会复制添加到目标节点或其子节点的任何事件侦听器

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

片段

var-box=document.querySelector（'.container'）；
var btnGrp=document.querySelectorAll（'.btn group'）；
var lastGrp=btnGrp.length-1；
var tgt=btnGrp[lastGrp]；
var dupe=tgt.cloneNode（真）；
框。追加子项（重复）
.btn默认值{
颜色：#007aff；
背景色：#fff；
边框颜色：#007aff；
}
.btn默认值：悬停，
.btn默认值：焦点，
.btn默认值：活动{
颜色：#fff；
背景色：#007aff；
边框颜色：#007aff；
}

1.
2.
3.
4.
5.
6.
7.
8.

左边
中间的
赖特
第三组在那里做什么？您从未将该类添加到
btnGroupFour
？如果可以，请提供一个指向您的网站的链接，或在的实例中进行复制。它使我们更容易四处查看可能出现的错误，而不是查看一系列孤立的函数调用和
col.appendChild（divTwo）没有任何意义。您不需要使用JSFIDLE，可以使用将可执行示例直接嵌入到您的问题中。@MilesGrimes
// 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);