jQuery.添加元素

最新推荐文章于 2024-05-24 13:39:19 发布
最新推荐文章于 2024-05-24 13:39:19 发布
阅读量43 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/H97042/p/9370124.html
版权

添加元素

建立元素经历的过程:

                                 1.建立元素

                                 2.为元素添加文本或属性

                                 3.将元素追加到DOM中

 

添加元素以下几个方法:

 方法 说明
append()在选择元素的子元素后面追加。由选择的元素调用这个函数，函数中的参数是新元素。
prepend()在选择元素的子元素前面追加。由选择的元素调用这个函数，函数中的参数是新元素。
after()在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。
before()在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。
appendTo()将新元素追加到选择元素的子元素后面。由新创建的元素调用这个方法，函数中的参数是选择的元素。
prependTo()将新元素追加到选择元素的子元素前面。由新创建的元素调用这个方法，函数中的参数是选择的元素。

 

 

 

<!DOCTYPE html>
<html>
<head>
<title>append</title>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').append(pel);
});
</script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prepend</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').prepend(pel);
});
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>after</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').after(pel);
});
</script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>before</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').before(pel);
});
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendTo</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click', function () {
$("<p>全面深化改革</p>").appendTo("div");
});
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prependTo</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click', function () {
$("<p>全面深化改革</p>").prependTo("div");
});
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/H97042/p/9370124.html

weixin_34273479
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.balloon.js：一个jQuery插件，用于向元素添加气球提示界面友好，可微调且没有CSS和图像
02-03
一个jQuery插件，用于向元素添加提示框用户友好，可微调且没有CSS和图像参见。快速开始（1）在jQuery之后下载并加载此插件javascript文件。 < script src =" /js/jquery.balloon.js " > </ script > （2...
jQuery – 添加元素
12-14
jQuery – 添加元素 通过 jQuery，可以很容易地添加新元素/内容。 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法： append() – 在被选元素的结尾插入内容 prepend() – 在被选元素的开头插入...
jQuery添加元素
weixin_57762662的博客
06-19 3326
jQuery添加元素
jquery.validate.js 详解
top_explore的博客
12-26 3919
jquery下载地址：https://jquery.com/download/ jquery.validate.js下载地址：https://cdnjs.com/libraries/jquery-validate jquery.validate.js是我们经常用到的form表单验证插件，可以很方便的帮我们进行表单验证。这里来学习一下他的用法，觉得不够详细的同学，可以去官网继续学习。 1.jq...
jquery添加外部html元素,jquery如何添加元素？
weixin_36277530的博客
06-15 740
jquery如何添加元素？添加元素可以使用append()、prepend()、after()、before()、appendTo()方法。1、append() 方法：在被选元素的结尾插入元素或内容2、prepend() 方法：被选元素的开头插入元素或内容。3、after() 方法：在被选元素之后插入内容。4、before() 方法：在被选元素之前插入内容。注意：append/prepend 是在...
jQuery添加元素的方法
热门推荐
terence的博客
12-17 8万+
before() 在被选元素之前插入内容 after() 在被选元素之后插入内容 prepend() 在被选元素的开头插入内容 append() 在被选元素的结尾插入内容
jquery.html加换行符,在使用jQuery时添加元素间的换行符或空格.append()
weixin_31456563的博客
06-09 2104
我有一个jQuery的元素，我从我的DOM通过调用：$(".some-selector");我所有的元素都是自己的DIV。我的DIV设置CSS(除其他外)display: inline-block;这阻止它们作为块元素(每个在其自己的行中)呈现。问题是，当这些DIV被渲染时，它们之间有空格，因为每个元素之间的文档中有换行符。我很舒服我当然可以使用float：left来摆脱这些空格，但这不是我想要的...
【学习笔记】jQuery.js
weixin_45305844的博客
07-31 7868
文章目录什么是javascript库？jQuery的概念jQuery的优点jQuery的入口函数jQuery的顶级对象$DOM对象和jQuery对象DOM对象和jQuery对象的相互转换jQuery基础选择器jQuery层级选择器jQuery设置css样式隐式迭代jQuery筛选选择器jQuery筛选方法jQuery链式编程jQuery操作css方法jQuery类名操作jQuery动画效果自定义动画：鼠标事件复合写法动画队列及其停止排队方法设置或获取元素固有属性值设置或获取元素自定义属性值数据缓存jQuer
jQuery表单库jquery.form.js
云客的技术博客【云游天下 做客四方】
07-11 1万+
本主题是《云客drupal源码分析》的番外篇，在drupal系统中用于支持AJAX API，由于这是一个独立实用的库，因此专门用一个主题介绍 简介： jQuery表单库（jquery.form.js库）以jQuery为基础，用于处理表单AJAX提交，使得表单AJAX提交简单、容易，且能完整控制提交过程和处理结果，不需要任何特殊标签辅助，不影响原表单结构，只要使用该库就能使普通表单平滑升级...
chosen.jquery.js 插件的使用和总结
cheng1a的博客
09-01 5554
Chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！chosen插件下载及使用教程：https://harvesthq.github.io/chosen/chosen插件的选项介绍：https://harvesthq.github.io/chosen/options.htmlchosen插件css线上cdn引入： chosen插件
jQuery.data()方法
UKunda的博客
12-17 2699
jQuery.data()方法 $.data() 函数用于在指定的元素上存取数据，返回设置值。 提示：1.这是一个底层方法，.data() 方法更方便使用。 2.通过 data() 函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。 3. 该方法目前并不提供在XML文档上跨平台设置，Internet Explorer不允许在XML文档中通过自定义属性附加数据。 用法一 $.data( element, key, value ) 注意：1.通过data()函数存取的数...
JQuery元素内添加元素
荣耀之路
11-29 9073
JQuery元素内添加元素
jQuery.js源码
05-14
DOM 操作：提供了丰富的 DOM 操作方法，如添加、删除、修改元素的属性、样式等。 2. 事件处理： 事件绑定：提供了简单易用的事件绑定方法，方便实现交互功能。 事件代理：支持事件代理，可以将事件处理程序绑定到...
jquery.backstretch.js
03-22
jquery-backstretch.js是一款简单易用的动态更新页面背景图片的jQuery插件，它允许你为任何页面元素添加一个动态调整大小的背景图像，可以实现将页面背景变成幻灯片的效果。图片可以根据元素宽高自动拉伸背景图片以...
jquery.initialize:一个简单的 jQuery 元素初始化器上下文插件
06-01
1.4.0 之前的最新更新：添加了子元素数据绑定。 最新更新至 1.3.0：数据属性、模板属性和字符串模板替换。 一个简单的 jQuery 元素初始值设定项上下文插件。 该插件使元素初始化并将定义的事件及其名称和数据附加...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 212
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1055
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 291
vue 使用 export default
Vue从入门到实战Day07
ltt159264的博客
05-21 892
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
jquery 设置添加元素
03-09
在jQuery中，可以使用一些方法来设置和添加元素。 1. 设置元素内容：可以使用`text()`方法或`html()`方法来设置元素的文本内容或HTML内容。例如： ```javascript $("#myElement").text("Hello, World!"); // 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值