JavaScript学习笔记7 DOM为指定元素插入子元素的方法

书中提供了一个小的案例来讲述DOM控制页面节点树的方法,我将这个过程比较详细的写了一遍,确实很实用!虽然使用方法比innerHTML繁琐些,但是可以非常精确控制每一个节点的位置,还可以把这个节点做成一个全局变量(这个是我看到这里自己总结的,应该是成立的),以后随时可以调用!

下面内容包括代码,我都是在markdown编辑器下手敲的,目的是为了在这个过程中,能再写一遍代码,对这些代码能加深印象

如果文字敲错了大家就当没看见,代码敲错了我相信能看出来的不会看我这种小白的blog,看不出来复制过去报错的,请留言哈。

createElement方法

createElement方法是在页面中创建一个新的元素,但这个元素是没有父元素的,它只是游荡在这个脚本中,不会被页面显示出来但实际上是存在的。
格式:

document.createElement(nodeName);

例如在一个空的HTML文件中创建一个元素p:


书中讲到,创建了一个元素后把它赋值给一个变量是一个不错的选择,这样方便后续调用:


appendChild方法

这个方法可以把createElement创建的元素插入页面中某个指定的元素节点下,使其成为这个元素的子节点。

格式:parent.appendChild(child);

例子:

上面这个HTML是一个空的ID为testdiv的div,我想将上面创建的那个P元素插入这个div中:

得到的结果是(我在浏览器中F12截图的):



可以看到,这个空的P标签已经成功插入到ID为testdiv的div标签下,成为它的子元素了。但这么写我觉得有点太长了,可以换成下面的写法:

个人觉得这种写法更容易调试代码,灵活性更高些!

切记:parent.appendChild(child);中的child是不带引号的,因为我在上面已经把这个元素存入了一个变量中,我在写的时候就因为这个问题,撒泼打滚的一个字一个字的对着书本的代码查了好半天才反应过来。

当然,我是小白才会因为这种基础的常识问题卡住,大神们请直接忽略!

createTextNode方法

上面讲的使用createElement创建一个空的元素p,并用appendChild插入了指定的div中,现在就可以使用createTextNode来为这个p元素创建内容,创建的形式也是和createElement一样,出来的也是一个浮游的文本元素。

格式:document.createTextNode(text);

例如:

document.createTextNode("This is mt blog!");
//var text = document.createTextNode("This is mt blog!");
//我一般习惯在创建元素的时候马上赋值给一个变量,方便后面使用

文本内容创建好了之后,就可以再使用appendChild方法,插入到p标签下了:

var text = document.createTextNode("This is mt blog!");
para.appendChild(text);

整个过程完整的代码如下:

最终的显示结果如下:


排版需要,我把浏览器放大了,实际上的This is my blog!显示出来是默认的字号和字体!

你可能感兴趣的:(JavaScript学习笔记7 DOM为指定元素插入子元素的方法)