菜单

依照jquery的关于动态创立DOM成分的难题,基于Jquery的动态创设DOM元素的代码

2019年8月6日 - 前端排行

动态创建div:

利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。

复制代码 代码如下:

复制代码 代码如下:

而jQuery使用$就可以直接创建DOM元素

<script type=”text/javascript”>
document.getElementById(“testDiv”).innerHTML =”动态创建的div”;
</script>

$(function(){
$(“<div>”,{
id: ‘test’,
text: ‘this is a test’,
“class”: “test”,
click: function(){
$(this).toggleClass(‘test’);
}
}).appendTo(“body”);
})

复制代码 代码如下:

而且用的应该是还是乐此不疲,但是有多少人知道这是错误的做法!错误的原因:
(1) 在页面加载时改变了页面的结构.
在IE6中如果网络变慢或者页面内容太大就会出现”终止操作”的错误.
也就是说”永远不要在页面加载时改变页面的Dom模型”.
(2) 使用修改HTML内容添加元素, 不符合Dom标准.
在实际工作中也碰到过使用这种方法修改内容后,
某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的.
但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以.
但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML.
所以也不是完全否定innerHTML函数的使用.所以从现在开始请摒弃这种旧知识,
使用下面介绍的正确方法编程.
关于使用HTML DOM创建元素本文不做详细介绍,
下面举一个简单的例子:第一种正确方式:

动态创建input:

var oNewP = $(“<p>使用jQuery创建的内容</p>”);

复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图