下面我来为您详细讲解jquery追加元素的所有方法全面深入实例讲解。

1. append()

1.1 简介

append() 方法用于在指定元素的结尾处（仍位于内部）插入指定内容。可以是任何内容，如字符串、DOM 元素或 jQuery 对象。
语法：$(selector).append(content)

1.2 示例

例如，在一个带有 id="demo" 的

元素中，我们插入一段文本：

<html>
<head>
<script src="jquery-3.5.1.js"></script> 
</head>
<body>

<p id="demo">我们正在使用 jQuery</p>

<script>
$(document).ready(function(){
  $("#demo").append("来进行追加内容的练习。");
});
</script>

</body>
</html>

输出结果为：
我们正在使用 jQuery来进行追加内容的练习。

2. prepend()

2.1 简介

prepend() 方法用于在指定元素的开头处（仍位于内部）插入指定内容。可以是任何内容，如字符串、DOM 元素或 jQuery 对象。
语法：$(selector).prepend(content)

2.2 示例

例如，我们在一个带有 id="demo" 的

元素中，插入一段文本：

<html>
<head>
<script src="jquery-3.5.1.js"></script> 
</head>
<body>

<p id="demo">我们正在使用 jQuery</p>

<script>
$(document).ready(function(){
  $("#demo").prepend("来进行文本追加的练习: ");
});
</script>

</body>
</html>

输出结果为：
来进行文本追加的练习: 我们正在使用 jQuery

3. after()

3.1 简介

after() 方法在被选元素之后插入内容（作为它的同胞）。可以是任何内容，如字符串、DOM 元素或 jQuery 对象。
语法：$(selector).after(content)

3.2 示例

例如，我们在一个带有 id="demo" 的

元素后面插入一段文本：

<html>
<head>
<script src="jquery-3.5.1.js"></script> 
</head>
<body>

<p id="demo">我们正在使用 jQuery</p>

<script>
$(document).ready(function(){
  $("#demo").after("<p>文本追加的第二行</p>");
});
</script>

</body>
</html>

输出结果为：
我们正在使用 jQuery
文本追加的第二行

4. before()

4.1 简介

before() 方法在被选元素之前插入内容（作为它的同胞）。可以是任何内容，如字符串、DOM 元素或 jQuery 对象。
语法：$(selector).before(content)

4.2 示例

例如，我们在一个带有 id="demo" 的

元素前面插入一段文本：

<html>
<head>
<script src="jquery-3.5.1.js"></script> 
</head>
<body>

<p id="demo">我们正在使用 jQuery</p>

<script>
$(document).ready(function(){
  $("#demo").before("<p>文本追加的第一行</p>");
});
</script>

</body>
</html>

输出结果为：
文本追加的第一行
我们正在使用 jQuery

5. wrap()

5.1 简介

wrap() 方法用于把 HTML 元素包裹在另一个 HTML 元素中。
语法：$(selector).wrap(wrapperfunction)

5.2 示例

例如，我们把一个带有 id="demo" 的元素包裹在

中：

<html>
<head>
<script src="jquery-3.5.1.js"></script> 
</head>
<body>

<div id="wrapper">
  <p id="demo">这是需要被包裹的元素。</p>
</div>

<script>
$(document).ready(function(){
  $("#demo").wrap("<div class='new'></div>");
});
</script>

</body>
</html>

输出结果为：

这是需要被包裹的元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery追加元素的所有方法全面深入实例讲解（append、prepend、after、before、wrap等等） - Python技术站