组内部按钮在内部html中无法正常显示

时间:2017-12-13 13:18:41

标签: javascript html css twitter-bootstrap

这里的JavaScript内部html我试图使用Bootstrap Button Group水平显示两个按钮。喜欢这张图片Bootstrap group button i want like this

但实际上它只显示出这样的1个按钮。 Bootstrap group button that is appearing

虽然它在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);

1 个答案:

答案 0 :(得分:0)

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