jQuery 创建 div 元素 - JavaScript

在 JavaScript 中，使用 jQuery 库可以方便地创建和操纵网页元素。本文将介绍如何使用 jQuery 创建 div 元素。

步骤

1. 首先，确保已在 HTML 文件中引入了 jQuery 库。可以通过以下代码在页面中引入 jQuery：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. 在 JavaScript 中，使用 $ 符号来访问 jQuery 库。

3. 使用 $("<element>") 语法创建一个新的元素，其中 <element> 是要创建的元素类型，这里是 div 元素。

   let divElement = $("<div>");
   

4. 可以使用 .css() 方法来设置 div 元素的样式。

   divElement.css("width", "200px");
   divElement.css("height", "200px");
   divElement.css("background-color", "red");
   

   这里设置了 div 元素的宽度为 200px，高度为 200px，背景颜色为红色。

5. 可以使用 .text() 方法设置 div 元素的文本内容。

   divElement.text("Hello, World!");
   

   这里将 div 元素的文本内容设置为 "Hello, World!"。

6. 可以使用 .appendTo() 方法将 div 元素添加到页面中的某个元素中。

   divElement.appendTo("body");
   

   这里将 div 元素添加到页面的 body 元素中。

完整示例代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    let divElement = $("<div>");
    divElement.css("width", "200px");
    divElement.css("height", "200px");
    divElement.css("background-color", "red");
    divElement.text("Hello, World!");
    divElement.appendTo("body");
  });
</script>

以上代码在页面加载完成后会创建一个宽度为 200px、高度为 200px、背景颜色为红色的 div 元素，并将其文本内容设置为 "Hello, World!"，然后将其添加到页面的 body 元素中。

以上就是使用 jQuery 创建 div 元素的简单示例。通过使用 jQuery，可以更方便地创建和操纵网页元素，使代码更加简洁易懂。