无法将引导程序类应用于使用createElement()方法创建的按钮



今天我第一次学习bootstrap 3。我成功地为我的按钮元素应用了一个类。我使用createElement((方法在点击时使用事件处理程序创建更多按钮。然而,在这些新创建的按钮中,我未能应用相同的类。用createElement((方法创建的按钮与主体中最初的按钮不同吗?

以下是CodePen的链接:https://codepen.io/bqw5354/pen/abZPRYm

<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" id="button1" class="btn-primary">1st</button>
<script>
document.getElementById("button1").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button2"                    
btn.class = "btn-primary";
btn.innerHTML = "2nd";
document.body.appendChild(btn); 
document.getElementById("button2").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button3"                    
btn.class = "btn-primary";
btn.innerHTML = "3nd";
document.body.appendChild(btn);
})
})
</script>
</body>
</html>

使用btn.className而不是btn.class

它会起作用的!

最新更新