从零开始学 Web之DOM(五)元素的创建

大家好,这里是「从零开始学 Web 系列教程」并在以下地址同步更新......

github:https://github.com/Daotin/Web

CSDN:https://blog.csdn.net/lvonve/

博客园:http://www.cnblogs.com/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关知识,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、元素的创建

1、元素创建的三种方式

1.1、方式一

示例:

缺陷:如果是在页面加载完毕后,通过这种方式创建元素的话,页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。

1.2、方式二

示例:

使用 innerHTML,在页面加载完毕后,不会清除页面的内容。

案例:动态创建列表

方式一的方式太过死板,li 标签的个数和内容都是固定的,如果增加 li 的个数需要修改源码。

1.3、方式三

第一步:创建元素,返回值为一个对象元素

第二步:将元素追加到父元素中

示例:

案例:动态创建列表

当在循环中添加事件的时候,建议不使用匿名函数,因为每个匿名函数都会占用一片内存空间,而使用函数调用的方式,不管循环多少次,都使用一份代码。

案例:动态创建表格

不能使用 这样的话,只有table有边框,而 tr 没边框。所以 js 中,table 标签有自带的 border 属性可以设置边框,注意不需要 px。

2、其他操作元素的方法

appendChild:追加

insertBefore: 在某个元素前添加

removeChild:删除元素

欢迎关注

Web前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180621G1HTX500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券