jQuery添加具有引导样式的元素

Question

I am trying to add a button to a specific HTML element using jQuery similar to, ( https://www.w3schools.com/jquery/jquery_dom_add.asp ) 我正在尝试使用类似于（ https://www.w3schools.com/jquery/jquery_dom_add.asp ）的jQuery向特定HTML元素添加按钮。

My issue is that when I try and run the code, 我的问题是，当我尝试运行代码时，

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

I don't get the styling I am wanting and it is messing up another part of my code unless I do the same as above, except without the bootstrap styling like, 我没有想要的样式，除非我没有做上面的相同的操作，否则它将弄乱我的代码的另一部分，除非没有类似的引导样式，

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

It works fine with the second example except for that the button styling doesn't use bootstrap like I am wanting in the first example and am not sure as to why? 在第二个示例中它可以正常工作，除了按钮样式不像我在第一个示例中那样使用引导程序，而且不确定为什么吗？

A more complete picture of the code is below, 下面是该代码的更完整图片，

    <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>

Answer 1

I think you just have a problem where you should be mixing your " and your ' 我认为您在将“”和“

try this: 尝试这个：

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

Answer 2

Maybe the problem is with your quotes 也许问题出在你的报价上

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

try 尝试

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

jQuery添加具有引导样式的元素

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-10-04 20:45:56

解决方案2
1 2017-10-04 20:48:30

jQuery添加具有引导样式的元素

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-10-04 20:45:56

解决方案2 1 2017-10-04 20:48:30

解决方案1
1 已采纳 2017-10-04 20:45:56

解决方案2
1 2017-10-04 20:48:30