通过 Javascript 创建手风琴答案

【问题标题】：Creating an accordion through Javascript通过 Javascript 创建手风琴
【发布时间】：2020-06-06 14:51:57
【问题描述】：

我使用的是 Javascript，没有 jQuery。

到目前为止我已经完成了手风琴标题面板：

var accordion = document.createElement('div');
            accordion.className = 'panel-group';
            accordion.id = 'accordion';
            document.getElementById('navgroupsframe').appendChild(accordion);

            var panel = document.createElement('div');
            panel.className = 'panel';
            panel.style.marginLeft = '-15px';
            accordion.appendChild(panel);

            var panelheading = document.createElement('div');
            panelheading.className = 'panel-heading';
            panel.appendChild(panelheading);

            var paneltitle = document.createElement('div');
            paneltitle.className = 'vgroupholder panel-title'

但是，我想到达这里：

<div class="panel-group" id="accordion">
                            <div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();">

我该怎么做？（添加data-parent等，只用Javascript，不用jQuery）。

谢谢。

【问题讨论】：

标签： javascript bootstrap-4 accordion

【解决方案1】：

您可能会考虑创建父元素，然后用一个很好的旧 innerHTML 注入所有其余元素，因为您没有使用 JQuery :)

var accordion = document.createElement('div');
accordion.className = 'panel-group';
accordion.id = 'accordion';

accordion.innerHTML = `<div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();"></div>
                             </div>
                       </div>`;

document.getElementById('navgroupsframe').appendChild(accordion);

【讨论】：