十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

结合实例详细介绍createElement()使用方法和应用

百恒网络 2016-11-19 733

在开发过程中,我们经常要通过JS在DOM中加一些元素,例如,在用户注册时进行异步判断用户是否存,而给出相应的提示,则就要用到创建一个元素,将内容的字体样式设置为红色,内容为用户名已经存在诸如些类的应用,在此我们着重介绍createElement()的使用方法和应用,使用document.createElement()方法可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,而在XML(包括XHTML)文档中,则是

区分大小写的。例如,使用下面的代码可以创建一个

元素:

var div=document. createElement("div");

在使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocuemnt属性。此时,还可以操作元素的特性,为它添加更多子节点,以及执行其他操作。来看下面的例子:

div.id="myNewDiv";

div.className="box";

在新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中,因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树,可以使用appendChild()、inser-

tBefore()或replaceChild()方法。下面的代码会把新创建的元素添加到文档的元素中:

document. body. appendChild( div);

一旦将元素添加到文档树中,浏览器就会立即呈现该元素。此后,对这个元素所作的任何修改都会实时反映在浏览器中。

在IE中可以以另一种方式使用createElement(),即为这个方法传人完整的元素标签,也可以包含属性,接下来由南昌网站制作公司百恒网络开发工程师结合实例介绍创建完整的DIV标签,如下面的例子所示:

var div=document. createElement("

http://www.jxbh.cn

")j

这种方式有助于避开在IE7及更早版本中动态创建元素的某些问题;下面是已知的一些这类问题。

◎不能设置动态创建的");

//创建input元素

var input=document. createElement("");

//创建button元素

var button=document.createElement("");

//创建单选按钮

var radiol=document.createElement("");

var radio2=document. createElement("");

}

与使用createElement()的惯常方式一样,这样的用法也会返回一个DOM元素的引用。可以将这个引用添加到文档中,也可以对其加以增强。但是,由于这样的用法要求使用浏览器检测,因此我们建议只在需要避开lE及更早版本中上述某个问题的情况下使用。其他浏览器都不支持这种用法。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络 http: //www.jxbh.cn 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×