簡體   English   中英

jQuery添加具有引導樣式的元素

[英]JQuery add elements with bootstrap styling

我正在嘗試使用類似於( https://www.w3schools.com/jquery/jquery_dom_add.asp )的jQuery向特定HTML元素添加按鈕。

我的問題是,當我嘗試運行代碼時,

var txt1 = "<button type = "button" class = "btn btn-primary">text</button>";        
$("#thing1").append(txt1);     // Append new elements

我沒有想要的樣式,除非我沒有做上面的相同的操作,否則它將弄亂我的代碼的另一部分,除非沒有類似的引導樣式,

    var txt1 = "<button">text</button>";        
    $("#thing1").append(txt1);     // Append new elements

在第二個示例中它可以正常工作,除了按鈕樣式不像我在第一個示例中那樣使用引導程序,而且不確定為什么嗎?

下面是該代碼的更完整圖片,

    <script>
function askName(){
    var name = prompt("What's your name?");
    var message = "Hello " + name + ", would you like to build a table?"
    document.getElementById('output').innerHTML = message;



    var txt1 = "<button type = "button" class = "btn btn-primary">text</button>";        
    $("#thing1").append(txt1);     // Append new elements

};

function tables(){
 var txt1 = "<p>Text.</p>";              // Create text with HTML
    var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery
    var txt3 = document.createElement("p");
    txt3.innerHTML = "Text.";               // Create text with DOM
    $("body").append(txt1, txt2, txt3);     // Append new elements

}


</script>


<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});
</script> 

</head>
<body>
<div class="container-fluid">

<button type = "button" class= "btn btn-primary" onclick="askName()">
    Want to chat?
</button>
</div>

<h3 style = "text-align: center"class="text-primary" id="output"></h3>

<div id = thing1>

</div>



</body>
</html>

我認為您在將“”和“

嘗試這個:

var txt1 = "<button type = 'button' class = 'btn btn-primary'>text</button>";    

也許問題出在你的報價上

var txt1 = "<button type = "button" class = "btn btn-primary">text</button>";        
$("#thing1").append(txt1);     // Append new elements

嘗試

var txt1 = '<button type = "button" class = "btn btn-primary">text</button>';        
$("#thing1").append(txt1);     // Append new elements

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM