Javascript 在onclick中创建和显示模态

所以，我有代码：

    function winModal(am)
{
    document.write('<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">');
    document.write('<div class="modal-dialog modal-dialog1 modal-lg">');
    document.write('<div class="modal-content modal-content1">');
    document.write('<div class="modal-body modal-body1">');
    document.write('<H2>Congratulations!</H2>');
    document.write('...');
    document.write('...');
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');

    $('#winModal' + am).modal('show');
}

函数winModal（am）
{
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
写下（‘恭喜！’）；
文件。写（“…”）；
文件。写（“…”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
$（'#winModal'+am）.modal（'show'）；
}

它工作得非常好（创建一个自定义模式并显示），因为我在文件末尾使用它，就像winModal（100）。当我想在按钮（onclick）中使用它时，它会删除整个站点的内容，并用modal替换它。我知道为什么会这样。（document.write会在加载时覆盖网站内容）。我想知道如何使它正常工作。我试过这样的innerHTML：

function winModal(am)
{
    document.getElementById('kkk').innerHTML = '<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">';
    document.getElementById('kkk').innerHTML = '<div class="modal-dialog modal-dialog1 modal-lg">';
    document.getElementById('kkk').innerHTML = '<div class="modal-content modal-content1">';
    document.getElementById('kkk').innerHTML = '<div class="modal-body modal-body1">';
    document.getElementById('kkk').innerHTML = '<H2>Congratulations!</H2>';
    document.getElementById('kkk').innerHTML = '<h4>You have won <span style="font-weight:bold;">' + am + '</span> credits!</h4>';
    document.getElementById('kkk').innerHTML = '<h4>Go to <span style="font-weight:bold;">my winnings</span> to withdraw this or play more!</h4>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';

    $('#winModal' + am).modal('show');
}

函数winModal（am）
{
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）.innerHTML='恭喜！'；
document.getElementById（'kkk'）.innerHTML='您赢得了'+am+'学分！'；
document.getElementById（'kkk'）.innerHTML='转到我的赢家，以撤销此游戏或播放更多游戏！'；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
document.getElementById（'kkk'）。innerHTML=''；
$（'#winModal'+am）.modal（'show'）；
}

---

但是，它不显示模式。

您每次都将

字符串分配给
document.getElementById（'kkk'）.innerHTML


函数winModal（am）{
var htmlStr=“”；
htmlStr+=''；
htmlStr+=''；
htmlStr+=''；
htmlStr+=''；
htmlStr+=‘恭喜！’；
htmlStr+='您赢得了'+am+'积分！'；
htmlStr+='转到我的奖金中以撤销此游戏或玩更多游戏！'；
htmlStr+=''；
htmlStr+=''；
htmlStr+=''；
htmlStr+=''；
document.getElementById（'kkk'）。innerHTML=htmlStr；
$（'#winModal'+am）.modal（'show'）；
}
每次使用
document.getElementById（'kkk'）时，您都在用新字符串覆盖现有字符串。innerHTML
尝试创建模板并分配给
kkk
元素

function winModal(am){

    var HTML = '<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">'+
                    '<div class="modal-dialog modal-dialog1 modal-lg">'+
                        '<div class="modal-content modal-content1">';
                            '<div class="modal-body modal-body1">'+
                                '<H2>Congratulations!</H2>';
                                '<h4>You have won <span style="font-weight:bold;">' + am + '</span> credits!</h4>'+
                                '<h4>Go to <span style="font-weight:bold;">my winnings</span> to withdraw this or play more!</h4>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>';

    document.getElementById('kkk').innerHTML = HTML;

    $('#winModal' + am).modal('show');
}

函数winModal（am）{
var HTML=''+
''+
'';
''+
“祝贺你！”；
“您已获得“+am+”学分！”+
“去我赢的钱那里取这个或玩更多！”+
''+
''+
''+
'';
document.getElementById（'kkk'）。innerHTML=HTML；
$（'#winModal'+am）.modal（'show'）；
}
仍然错误。将HTML字符串分配给
kkk
，这是行不通的，谢谢。完整的代码在这个脚本之后只是一个id为“kkk”的div，它可以工作。为了更好地理解，请提供一个工作演示（代码片段，jsfiddle…）