jquery在页面加载之前使用循环添加元素

时间:2016-05-17 09:39:42

标签: javascript jquery html css

我想使用jquery添加8个复选框,编号从11到18。

我的javascript

<script type="text/javascript">
$(document).ready(function(){
 for (i = 11; i < 19; i++) {
   $("#container").append("<div class=\"round-button\"><div class=\"round-button-circle\"><label><input type=\"checkbox\" value=" + i + "><span>" + i + "</span></label></div></div>");
}
});
</script>

html只是

<div id="#container"></div>

更新:小提琴正在运行,但不能在html中运行。我做错了什么?

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/select2.css">
    <link rel="stylesheet" href="css/select2-bootstrap.css">

</head>

<body>
    <div id="container">
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        for (i = 11; i < 19; i++) {
            $("#container").append("<div class=\"round-button\"><div class=\"round-button-circle\"><label><input type=\"checkbox\" value=" + i + "><span>" + i + "</span></label></div></div>");
        }
    });
    </script>
</body>

</html>

css在styles.css

1 个答案:

答案 0 :(得分:1)

从div的id中删除#,只需将id提供给div,如

<div id="container"></div>

Jsfiddle:http://jsfiddle.net/qtju592w/