重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
添加新内容的四个 jQuery 方法:
郏县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
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="pText./p"; // 以 HTML 创建新元素
var txt2=$("p/p").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容;jQuery before() 方法在被选元素之前插入内容。
实例:
$("img").after("Some text after");
$("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="bI /b"; // 以 HTML 创建新元素
var txt2=$("i/i").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
参考资料:jQuery - 添加元素
读入代码后JS就被插入到body上,你单独取那个elm是无法取出js的,因为插入的js并不属于这个elm。
jquery 对html 里面含有SCRIPT会做一些处理。
创建SCRIPT对象,设置相应属性,添加到document里面。
所有那样是获取不到的。
详细介绍:
在当前html里写如下js:
$("#div1").load("test.html #div1");//把test.html里面id为div1的加载到当前页的div1
$("#div2").load("test.html #div2");//把test.html里面id为div2的加载到当前页的div2
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:
div
id="testdiv"
ul/ul
/div
假设我们要给ul动态添加的li绑定click事件形成如下结果
div
id="testdiv"
ul
li
name="apple"apple/li
li
name="pear"pear/li
/ul
/div
script
function
test(name){
alert("I'm
"+name);
}
//做法如下:
$("#testdiv
ul").on("click","li",
function()
{
//test($(this).attr("name"));
//do
something
here
});
//主动触发某个li的click事件
//
$("#testdiv
ul
li[name='apple']").trigger("click");
/script
以上这篇jquery
html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。