jquery是一个快速、简洁的javascript库。它是构建交互式web页面所必需的，具有易用性、灵活性和可扩展性。在web开发中，动态添加div元素是一个常见的需求。本文将介绍如何使用jquery动态添加div并设置属性值。
一、准备工作
在使用jQuery前，需要在HTML文件中引入jQuery库。在本例中，我们将使用jQuery 3.5.1版本：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
二、动态添加div
在jQuery中，可以使用append()方法动态添加元素。该方法接受一个参数，用于指定要添加的内容。可以是HTML标记、DOM元素、文本或jQuery对象。
例如，我们可以使用以下代码在body元素中添加一个div：
$("body").append("<div>这是一个新的div</div>");上述代码中，我们使用$()函数选择body元素，并使用append()方法添加一个新的div元素。添加的内容字符串可以是任意的HTML标记或纯文本。
如果要动态添加多个元素，可以将它们放在一个字符串中，使用逗号隔开。例如：
$("body").append("<div>这是第一个div</div>, <div>这是第二个div</div>");这将在body元素中添加两个div元素。
三、设置属性值
一旦添加了新的div元素，就可以使用attr()方法来设置属性值。attr()方法接受两个参数，第一个参数为要设置的属性名称，第二个参数为属性值。例如：
$("body").append("<div>这是一个新的div</div>");
$("div").attr("id", "new-div");上述代码将为新添加的div元素设置了id属性，并将其值设置为"new-div"。
可以使用prop()方法来设置布尔值属性的值，例如：
$("input").prop("checked", true);上述代码将所有input元素的checked属性设置为true。
除了使用attr()和prop()方法外，还可以使用css()方法来设置CSS属性值。例如，可以将新添加的div元素的背景颜色设置为蓝色：
$("div").css("background-color", "blue");使用css()方法可以设置任何CSS属性，包括颜色、字体、大小、边框等。
四、完整示例代码
下面是一个完整的示例代码，它动态添加了两个div元素，并设置它们的id属性和背景颜色：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动态添加div并设置属性值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("body").append("<div>这是第一个新的div</div>");
$("body").append("<div>这是第二个新的div</div>");
$("div").eq(0).attr("id", "div1").css("background-color", "blue");
$("div").eq(1).attr("id", "div2").css("background-color", "green");
});
</script>
</head>
<body>
</body>
</html>上述代码中，我们使用$(document).ready()函数确保在页面完全加载后再执行JavaScript代码。我们先在body元素中添加了两个新的div元素，然后使用eq()方法选择它们中的一个。最后，我们使用attr()方法设置div1的id属性，并使用css()方法设置背景颜色为蓝色。接着选择div2元素，使用attr()方法设置其id属性，并使用css()方法设置背景颜色为绿色。
五、总结
在jQuery中动态添加div元素并设置属性值，是一个常见的需求。我们可以使用append()方法添加新的div元素，使用attr()、prop()和css()方法来修改元素的属性和样式。为了保持代码的可读性和可维护性，建议将JavaScript代码放在单独的文件中，并在HTML文件中引用。
