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

Question

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

Answer 1

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