JavaScript下DOM的基础学习之动态创建标签
javascript不仅可以用来改变网页的结构和内容,还可以通过创建新元素和修改现有元素来改变网页结构。
在学习利用dom方法在web中添加标记时,常常能想到document.write()和element.innerhtml方法,但是,不推荐使用这两种方法。
这两种方法都右一种共同的弊端:结构、样式、行为没有分离。
例如:
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> </head> <body> <script type="text/javascript"> document.write("<p>hello world</p>") </script> </body> </html>
即使把document.write()语句挪到外部函数中,也还是要在<body>中放入<script>标签才能调用这个函数。
像上面这种把javascript和html代码融合到一起的是一种很不好的做法,这样的代码即不容易和编辑,也无法把样式,结构分离。
结构(html)、样式(css)、行为(js)永远是最佳的原则,只要存在可能,就要最大限度的使用css外部文件,用javascript外部文件去控制网页的行为。
.innerhtml属性是html专有的属性,不能用于其他标记语言。.innerhtml是“大锤”,使用于一大段html内容插入到文档中。
dom方法创建标签
dom方法的实质就是在修改dom节点树,在浏览器看来dom节点树才是文档。
实质就是不是在创建标记,而是在修改节点树,从dom角度出发才是问题的关键。在dom看来,想要在节点树上添加内容就是要添加节点,如果你向添加一些标记到文档中,就要插入元素节点。
一.createelement方法
语法:document.createelement(nodename);
我们来创建一个一个p元素:document.createelement("p").
二.appendchild方法
语法: parent.appendchild(child);
我们只是创建了一个新元素,但是并没有加到节点树中。把新建的节点插入到节点树中的最简单的方法就是:让这个新节点成为某个现有节点的一个子节点。
例如: 在<body>中添加 <p>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> </head> <body> <p id = "box"></p> <script type="text/javascript"> var pele = document.createelement("p"); pele.innerhtml = "hello world"; var box = document.getelementbyid("box"); box.appendchild(pele); </script> </body> </html>
上一篇: 李金颖廊坊师范学院信息技术提高班上课日程
下一篇: 如何用栈实现队列