04——javascript Dom 动态创建元素操作样式

最新推荐文章于 2024-06-25 19:24:28 发布

幺生

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/kkcjs/article/details/53087399

版权

本文介绍了如何在JavaScript中动态创建DOM元素，包括使用createElement和appendChild方法，以及删除和插入元素的操作。还讨论了innerText与innerHTML的区别及其使用场景。同时，文章提到了浏览器兼容性问题，特别是对innerHTML和style属性的处理，并给出了针对Firefox和IE的解决方案。最后，文章强调了将操作DOM的代码放在onload事件中的重要性，以及如何通过JavaScript改变元素样式。

摘要由CSDN通过智能技术生成

动态创建DOM

1） document.write只能在页面加载过程才能动态创建

可以调用document的createElement(‘标签名’)方法来创建具有指定标签的DOM对象，然后通过某个元素的appendChild(node);方法将创建的元素添加到相应的元素下。
父元素对象.removeChild(node)(子元素对象);删除元素。
父元素对象.insertBefore（node NewChild,node refChild）,在父元素对象把NewChild插到refChild前面，replaceChild（node new,nodeold）替换
functionshowIt(){
    vardivMain=document.getElementById(‘divMain’);
    varbtn=document.createElement(“input”);
    btn.type=”button”
    btn.value=”我是动态的”;
    divMain.appendChild(btn);
}
<div id=”divMain”></div>
<input type=”button” value=”ok” οnclick=”showIt()”/>

innerText（兼容IE，不兼容FF）和innerHTML（兼容所有的浏览器）

1）几乎所有的DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内容的文本表示形式和HTML源码，这两个属性是可读可写的。//FF不支持innerText，在FF下用textContent属性。也可以用innerHTML 设置普通文本。//编写兼容的innerText

2）示例：innerText和innerHTML区别

3）用innerHTML也可以代替createElement,属于简单、粗放型、后果自负的创建。

4）示例
function createLink(){
var divMain=document.getElementById(‘divMain’)