jQuery( html [, ownerDocument ] )Returns: jQuery

Description: Creates DOM elements on the fly from the provided string of raw HTML.

Creating New Elements

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with <tag ... >). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:

1
$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );

For explicit parsing of a string to HTML, use the $.parseHTML() method.

By default, elements are created with an .ownerDocument matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., $("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document).

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — $( "<img />" ) or $( "<img>" )$( "<a></a>" ) or $( "<a>" ) — jQuery creates the element using the native JavaScript .createElement() function.

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html><title>, or <head>elements. As a result, the elements inserted may not be representative of the original string passed.

Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all hrefproperties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:

1
$( "<a href='https://jquery.com'></a>" );

Tags that cannot contain elements may be quick-closed or not:

1
2
$( "<img>" );
$( "<input>" );

When passing HTML to jQuery(), note that text nodes are not treated as DOM elements. With the exception of a few methods (such as .content()), they are generally ignored or removed. E.g:

1
2
var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]

This behavior is expected. As of jQuery 1.9.0 (and unless using the jQuery Migrate plugin), jQuery() requires the HTML string to start with a < (i.e text nodes cannot appear at the front of the HTML string).

As of jQuery 1.4, the second argument to jQuery() can accept a plain object consisting of a superset of the properties that can be passed to the .attr() method.

Important: If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: valcsshtmltextdatawidthheight, or offset.

As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter:

1
2
3
4
5
6
7
8
$( "<div></div>", {
"class": "my-div",
on: {
touchstart: function( event ) {
// Do something
}
}
}).appendTo( "body" );

The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.

While the second argument is convenient, its flexibility can lead to unintended consequences (e.g. $( "<input>", {size: "4"} ) calling the .size() method instead of setting the size attribute). The previous code block could thus be written instead as:

1
2
3
4
5
6
7
8
$( "<div></div>" )
.addClass( "my-div" )
.on({
touchstart: function( event ) {
// Do something
}
})
.appendTo( "body" );

Examples:

Create a div element (and all of its contents) dynamically and append it to the body element. Internally, an element is created and its innerHTML property set to the given markup.

1
$( "<div><p>Hello</p></div>" ).appendTo( "body" )

Create some DOM elements.

1
2
3
4
5
6
7
8
$( "<div/>", {
"class": "test",
text: "Click me!",
click: function() {
$( this ).toggleClass( "test" );
}
})
.appendTo( "body" );

Using The jQuery Migrate Plugin的更多相关文章

  1. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  2. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  3. jQuery DataTables Plugin Meets C#

    Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I w ...

  4. jQuery Validation Plugin学习

    http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...

  5. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  6. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  7. jQuery validator plugin 之 custom methods 案例1:multi email

    1.add method jQuery.validator.addMethod( "multiemail", function (value, element) { var ema ...

  8. jQuery webcam plugin

    jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera di ...

  9. http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started

    http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started Jquery.Form 异步 ...

随机推荐

  1. 运行VUE的前端项目

    前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package ...

  2. HTTPS加密过程分析

    HTTPS加密的作目的是解决信息传输过程中数据被篡改,窃取 HTTPS使用了一系列的加密算法:对称加密算法.非对称加密算法.单向加密算法 非对称加密算法 分为公钥部分和私钥部分,用公钥加密的密文只能由 ...

  3. 彻底弄懂css中单位px和em,rem的区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  4. cloudstack4.11+KVM+4网卡bond5+briage 交换机不作配置

    网卡绑定配置 # cat ifcfg-em1TYPE=EthernetBOOTPROTO=noneDEVICE=em1ONBOOT=yesMASTER=bond0SLAVE=yes# cat ifcf ...

  5. 第九章 词典 (d1)散列:排解冲突(1)

  6. Python3 reversed 函数

    Python3 reversed 函数  Python3 内置函数 描述 reversed 函数返回一个反转的迭代器. 语法 以下是 reversed 的语法: reversed(seq) 参数 se ...

  7. 高德地图开发者平台获取sHA1值

    一般在  Application 中进行初始化 /** * 获取高德SHA1值 * */ public static String sHA1(Context context) { try { Pack ...

  8. 【mybatis基础】mybatis开发dao两种方法

    mybatis是一个支持普通SQL查询,存储过程和高级映射的优秀的持久层的框架,是apache下的顶级项目.mybatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.mybat ...

  9. MySQL之开启远程连接

    MySQL安装时,默认只能本地连接. mysql -u root -p mysql>use mysql; mysql>select 'host' from user where user= ...

  10. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...