使用Javascript DOM操作向div添加html元素
使用Javascript DOM操作向div添加html元素
提问于 2016-04-04 23:19:37
我试图只使用Javascript (不使用jQuery)复制以下HTML代码。我希望按钮显示为一个组，但看起来它们是单独添加的。我已经阅读了引导按钮组(http://getbootstrap.com/components/#btn-groups)，并且在html上调用btn-组类。因此，我的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/
回答 1
Stack Overflow用户
发布于 2016-04-05 00:00:50
您可以在父元素cloneNode()上使用.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(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36414540
复制相关文章
相似问题
腾讯云开发者
