javascript - 组按钮无法在内部html中正确显示

在JavaScript内部html中，我尝试使用Bootstrap按钮组水平显示两个按钮。像这张照片

但实际上它只显示1个这样的按钮。


尽管它在HTML中可以正常工作，但不知道为什么在内部HTML中会产生问题。这是JavaScript代码段

var div = document.createElement('div');
div.className = 'row';
div.innerHTML = '<div class="container-fluid" style="background-color: #b5ffaa; height: auto; width: auto"\
                <div class="row"\
                <br>\
                <div class="col-sm-8">\
                <h2 style="color: #000000">' + name + '</h2>\
                <h3 style="color: #000000">' + type + '</h3>\
                <h4 style="color: #000000">Salary: ' + sal + '</h4>\
                <h4 style="color: #000000">Location: ' + d[0] + ',' + d[1] + ',' + d[2] + ',' + d[3] + ',' + d[4] + ',' + d[5] +'</h4>\
                <br>\
                </div>\
                <br><br><br>\
                <div class="btn-group btn-group-lg">\
                <button type="button" class="btn btn-primary" onclick="job_info()" href="#jobdetails">More Details</button>\
                <button type="button" class="btn btn-primary">Apply</button>\
                </div>\
                </div><br></div>';

document.getElementById('content').appendChild(div);

最佳答案

它在这里工作正常https://jsfiddle.net/gLw9bj7n/3/
但可能您的代码未创建或没有作用域访问变量d, name, type, sal

关于javascript - 组按钮无法在内部html中正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47794003/