频道栏目
首页 > 资讯 > JavaScript > 正文

JavaScript下DOM的基础学习之动态创建标签

18-07-23        来源:[db:作者]  
收藏   我要投稿

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>
    <div id = "box"></div>
    <script type="text/javascript">
    var pEle = document.createElement("p");
    pEle.innerHTML = "hello world";
    var box = document.getElementById("box");
    box.appendChild(pEle);
    </script>
</body>
</html>
相关TAG标签
上一篇:C#异步编程示例讲解
下一篇:OpenGL面片拣选解析
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站