909422229_Jquery中对元素的添加
来源:互联网 发布:2016淘宝链接降权恢复 编辑:程序博客网 时间:2024/05/21 08:40
通过 jQuery,可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
实例
function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");
$("img").before("Some text before");
$("img").before("Some text before");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
实例
function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
阅读全文
1 0
- 909422229_Jquery中对元素的添加
- 黑马程序员_JQuery中对节点的相关操作回顾
- 909422229_Jquery获取元素标签内容与设置
- 04_jQuery对表单表格的操作及应用
- [知了堂学习笔记]_jQuery对DOM的操作
- 对List<E>集合中添加新元素覆盖之前的元素问题的分析
- js对js加载拼接的html代码中元素添加ajax方法请求后台数据
- Set中添加相同的元素
- 在vector中添加元素的方法
- 迭代器添加元素中遇到的问题
- C++中map元素添加的方法
- jQuery对 动态添加的元素 绑定事件
- DWR中对元素的操作
- Hibernate中对generator元素的理解
- MATLAB对矩阵中元素的访问
- tensorflow 中对数组元素的操作
- jquery 中添加元素
- 02_jQuery的DOM操作
- bootstrap与pagehelper实现分页
- Maven进价:Maven的生命周期阶段
- AR Shadow Shader 实时阴影+ DepthMask透明遮罩
- 141. Linked List Cycle
- Zygote调用流程分析
- 909422229_Jquery中对元素的添加
- highCharts(一)Highcharts 基本组成
- locationManager.getLastKnownLocation(locationProvider);//地理位置获取为null的解决方案
- python函数式编程之匿名函数lambda
- Dagger2入门简记
- com/alibaba/dubbo/common/bytecode/Wrapper0 has illegal signature "(V)V"
- 我的KVM显卡直通实践
- 共享经济已成资本傀儡,背后是腾讯和阿里的暗斗
- css实现-商城分类导航效果