jQuery如何创建DOM元素
jQuery如何创建DOM元素
本篇内容介绍了“jQuery如何创建DOM元素”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
从 jQuery 1.8开始, 任何jQuery实例方法(一个jQuery.fn的方法),可以被用来作为一个该对象的属性传递给第二个参数:
$( "<div></div>", {
"class": "my-div",
on: {
touchstart: function( event ) {
// do something
}
}
}).appendTo( "body" );
在这个对象中,"class"(类)的名称必须使用引号括起来,因为它是一个JavaScript保留字,还有不能使用"className",因为它是指的DOM属性(property),不是属性(attribute)。
虽然第二个参数是方便,它的灵活性可能会导致意想不到的后果(例如$("<input>", {size: "4"})调用.size()方法,代替设置size属性)。上面的代码块可以被写入,代替为:
$( "<div></div>" )
.addClass( "my-div" )
.on({
touchstart: function( event ) {
// do something
}
}).appendTo( "body" );
例子:
Example: 动态创建一个 div 元素(以及它的内容),并将它追加到 body 元素后。在 jQuery 内部是通过所指定元素的 innerHTML 属性对新生成的元素进行赋值的。
$( "<div><p>Hello</p></div>" ).appendTo( "body" )
Example: 创建一些 DOM 元素。
$( "<div/>", {
"class": "test",
text: "Click me!",
click: function() {
$( this ).toggleClass( "test" );
}
}).appendTo( "body" );
“jQuery如何创建DOM元素”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站,小编将为大家输出更多高质量的实用文章!
推荐阅读
-
jquery不显示图片背景如何解决
jquery不显示图片背景如何解决这篇文章主要介绍了jquery不...
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
jquery如何求屏幕的高度
jquery如何求屏幕的高度这篇“jquery如何求屏幕的高度”文...
-
jquery如何删除最后一个子元素
jquery如何删除最后一个子元素本篇内容主要讲解“jquery如...
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
每周一书《深入PHP与jQuery开发中文版附源码》分享!
-
PHP写站点地图sitemap代码分享及robots的SEO
-
jquery数据类型有哪些
-
jquery中size用不了怎么解决
jquery中size用不了怎么解决这篇文章主要讲解了“jquer...
-
jquery如何判断某个标签是否存在
jquery如何判断某个标签是否存在这篇文章主要介绍“jquery...