通过 Javascript 创建手风琴

Question

我正在使用 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）。

谢谢。

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

通过 Javascript 创建手风琴

Creating an accordion through Javascript

javascript

accordion

bootstrap-4