如何用jQuery在两秒内追加一个元素

想在网页上追加元素，可以使用jQuery的append方法。append方法可以让我们在指定的元素内添加一个新元素。具体实现过程如下：

步骤1：引入jQuery库

在使用jQuery之前，需要确保已经引入了jQuery库。可以从CDN上获取jQuery库，也可以从本地路径引入。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤2：创建新元素

在使用jQuery追加元素之前，需要先创建一个新的元素。可以使用jQuery的工厂函数来创建一个新元素。

var newElem = $("<div/>").text("新元素");

以上代码创建了一个新的div元素，这个div元素的内容为“新元素”。

步骤3：追加新元素

在将新元素追加到页面中之前，需要指定它要追加到哪个元素内。可以选择一个已有的元素来追加，也可以在文档中创建一个新的元素来追加。

// 将新元素追加到已有的元素内
$("#container").append(newElem);

// 在文档中创建一个新的元素，并将新元素追加到这个新元素内
$("<div/>").appendTo("body").append(newElem);

以上代码分别演示了如何将新元素追加到已有的元素内和如何创建一个新的元素来追加。

示例1：追加一个按钮

假设现在要在页面中添加一个按钮，按钮的文本为“点击我”。

// 创建一个button元素，并设置文本为“点击我”
var newBtn = $("<button/>").text("点击我");

// 将新按钮追加到container元素内
$("#container").append(newBtn);

以上代码实现了在container元素内追加一个按钮。

示例2：追加一段文本

假设现在要在页面中添加一段文本，文本内容为“这是一段新文本”。

// 创建一个p元素，并设置文本为“这是一段新文本”
var newPara = $("<p/>").text("这是一段新文本");

// 在body元素内创建一个新元素，并将新文本追加到这个新元素内
$("<div/>").appendTo("body").append(newPara);

以上代码实现了在页面底部追加一段文本。