JQuery插入元素

最新推荐文章于 2023-02-01 22:52:57 发布

opo77_

最新推荐文章于 2023-02-01 22:52:57 发布

阅读量252

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/opo77_/article/details/109010954

版权

本文介绍了如何在JQuery中高效地插入元素，强调将选取结果保存在变量中以节省性能，并详细阐述了插入元素的两个步骤：创建jQuery对象和使用特定方法（before(), after(), prepend(), append()）将内容插入页面。示例中展示了如何创建并保存jQuery对象，以及不同插入方法的使用。" 131353346,14928496,全国大学生数据统计与分析竞赛-论文质量评价,"['数据分析', '机器学习', 'Python']

摘要由CSDN通过智能技术生成

插入元素

有时我们会把jQuery选取的结果保存在变量中

像这样： $i t e m =$ (“li”)因为我们有时候会多次使用一个选取结果，如果每次都重新选取，消耗电脑性能。，所以一般将选取的结果保存在变量中。
插入元素的两个步骤：
第一，将新元素创建为jQuery对象
第二，使用一个方法将新内容插入到页面中。
举例：
创建一个变量$fragment,其中保存了一个jQuery对象，他是空的li元素。

var $fragment=$('<li>');

用变量保存一个jQuery对象，它带有class和文本元素。

var $fragment=$('<li class="favorite">item</li>');

当拥有了一个包含了新内容的变量时，使用下面的方法把内容插入到页面中。在这里插入图片描述
.before()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>