使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素:
- append() – 在指定的元素的尾部添加一个新内容。
- prepend() -在指定的元素里前部添加新内容。
- after() – 在指定元素前添加新内容
- before() -在指定元素的后面添加新内容。
乍一看append,prepend 和after,before似乎功能一样,但append,prepend指在选中的元素本身(内部)的前面和后面,而after,before指在选择中的元素的前面和后面。
可以参考下面的append例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
prepend示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function () {
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>
append(),prepend()支持同时插入多个元素,下面的例子添加三个使用不同方法创建的新元素:
function appendText()
{
// Create element with HTML
var txt1="<p>Text.</p>";
// Create with jQuery
var txt2=$("<p></p>").text("Text.");
// Create with DOM
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
// Append the new elements
$("p").append(txt1,txt2,txt3);
}
下面的例子使用after,before 在指定的元素前后面添加新内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("img").before("<b>Before</b>");
});
$("#btn2").click(function () {
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/guidebee.png"
alt="guidebee" width="120" height="125">
<br>
<br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
同样after,before也支持同时插入多个元素:
function afterText()
{
// Create element with HTML
var txt1="<b>I </b>";
// Create with jQuery
var txt2=$("<i></i>").text("love ");
// Create with DOM
var txt3=document.createElement("big");
txt3.innerHTML="jQuery!";
// Insert new elements after img
$("img").after(txt1,txt2,txt3);
}
分享到:
相关推荐
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符...
比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的...
课程内容探索如何编写jQuery基础知识如何选择元素并应用操作了解有关应用样式和类的信息向元素(如隐藏和显示)添加效果使网页栩栩如生,并具有动画和效果(如滑动和淡入淡出)创建与您的交互使用事件侦听器(例如...
jQuery简洁的Ajax jQuery Unobtrusive Ajax库通过添加对通过Ajax调用将HTML替换选项指定为HTML5 data-*元素的支持,对jQuery Ajax方法进行了补充。 该项目是ASP.NET Core的一部分。 您可以在仓库中找到ASP.NET Core...
###简短事实全面响应仅使用数据属性显示弹出窗口中的任何元素几个选项和回调改写样式不是痛苦,因为它们数量很少真正轻巧浏览器:Firefox,Chrome,Safari,iOS,Android,IE8 + 撰写者:Dzmitry Vasileuski ### ...
1、在JQuery Mobile中,多个页面的切换是通过元素、并将属性设置为#+对应的id号的方式进行的。 2、多页面切换示例代码: 代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <...
jQuery Unobtrusive Validation库通过添加对将验证选项指定为HTML5 data-*元素的支持,对jQuery Validation进行了补充。 该项目是ASP.NET Core的一部分。 您可以在仓库中找到ASP.NET Core的示例,文档和入门说明。 ...
第一部分 JavaScript入门 1 第1章 编写第一个JavaScript程序 1 1.1 编程简介 1 什么是计算机程序 2 1.2 如何把JavaScript添加到页面 3 外部JavaScript文件 5 1.3 第一个JavaScript程序 7 1.4 把文本写到Web页面上 9 ...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 jQuery项目历史 1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第...
##The Module 允许您添加自定义的 Bootstrap 化元素,例如可配置的 Bootstrap 菜单块、来自内容类型的导航栏(包括一个不错的管理导航栏)轮播等等。 这几乎是使用这个主题的主要内容。 安装 很简单的东西: 获取...
作为连接实例的一些东西,你可以用这些方法做,你可以使用记录的addClass()方法,或包裹()方法记录CSS类应用到所选元素或包裹另一个HTML元素中选择的元素。 尝试进行这些实验-例如,查看添加“ pinky”类会做...
作为连接实例的一些东西,你可以用这些方法做,你可以使用记录的addClass()方法,或包裹()方法记录CSS类应用到所选元素或包裹另一个HTML元素中选择的元素。 尝试进行这些实验-例如,查看添加“ pinky”类会做...
通过将data-uk-*属性添加到HTML元素来创建所有JS实现。 没有添加其他JS行。 uikit.min.js文件是uikit.min.js中UIKit 3的最小最新版本(最新)。 data-uk-*语法用于与每个库一起使用并验证html代码。图像和图形所有...
您可以通过在jQuery选择上调用slippy()来初始化slippy,例如,如果将slide类添加到所有的div div中,请使用: $(".slide").slippy({}) 。 建议使用slide类,因为这是默认CSS文件使用的格式,但是您可以随意执行所需...
5.2.5 添加输入元素 98 5.2.6 辅助方法、模型和视图数据 102 5.2.7 强类型辅助方法 104 5.2.8 辅助方法和模型元数据 105 5.2.9 模板辅助方法 105 5.2.10 辅助方法和modelstate 106 5.3 其他输入辅助方法 107 ...
Vue前端快速入门 Vue网站的入门模板-无节点 预览 在线演示 使用这个专案 如何设定: 使用上方的模板按钮将此项目添加到您的仓库中(无需派生)。 转到您的仓库的“设置”并启用GitHub Pages 。 几秒钟后,打开...
调制器描述用于生成模式的纯JavaScript组件。为什么要使用Modalator? 该模式是: 纯JavaScript-... Tiny-30 kb源代码和12 kb最小代码入门安装运行此命令npm i modalator --save添加为资源。 < script type = "te
14、在线构建器:拖动表单元素生成相应的HTML代码。 15、连接池监视:监视当前系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 16、产品许可: 对项目进行许可证书控制,防止程序拷贝运行。 17、公告通知: ...