javascript中创建元素节点,文本节点与插入节点

xiaoqihv8个月前 (04-08)前端设计47

在javascript中提供了很多操作DOM文档的方法,当然也包括创建一个节点(元素),创建一个文本节点(text),还有把创建的节点插入到文档中去。

createElement方法

createElement方法创建一个新的元素节点,但他只能创建元素并不能创建元素中的内容

语法:

document.createElement(nodename);

例:

创建一个新的P标签元素,并赋值给para

var para = document.createElement("p");

我们创建了一个空白的P标签元素,但是我们需要再创建内容并填充到这个新创建的空白P标签中

createTextNode方法

createTextNode方法,可以创建一个文本节点。需要要注意的是,此方法只能创建文本节点,并不创建元素节点。

语法:

document.createTextNode(text);

例:

创建一个内容为“这是飞鸟慕鱼博客”的文本节点,并把这个新创建的文本节点赋值给一个变量,以便好操作。

代码:

var txt = document.createTextNode("这是飞鸟慕鱼博客");

通边上面createElement方法和createTextNode方法创建了一个新的元素节点和一个新的文本元素节点,但它们现在只是在javascrip世界中,并没有真正的出现在dom(文档)中,这里我们还有要别的方法,将它们插入到文档流中!

appendChild方法

appendChild方法,可以把新创建的节点插入到文档(DOM)中指点节点中,成为指定节点的一个子节点。

createTextNode方法,createElement方法,appendChild方法

语法:

parent.appendChild(child);

我们演示一个例子,让上面的三个方法综合起来使用

利用javascript向DOM中的一个指定的ID元素中,插入一个新的P标签元素,并加入内容“这是飞鸟慕鱼博客”

HTML代码:

<div id="mochu"></div>

javascript代码:

var mochu = getElementById("mochu");//指定ID为mochu的元素var pare = document.createElement("p");//新建一个P标签元素var txt = document.createTextNode("这是飞鸟慕鱼博客");//新建文本节点pare.appendChild(txt);//把文本节点追加到新建的P标签上mochu.appendChild(pare);//把新建的P标签追加到文楼中去	

代码,未测试各位有时间可以测试一下下!

相关文章

500 501 502 503 504 505 详解

500 501 502 503 504 505 详解

服务器会经常的出现错误,那么在平时的时候出现了服务器错误,我们要如何去解决了,今天小编就简单的说说服务器500错误、501错误、502错误、503错误、504错误、505错误的一些问题所在。服务器50...

javascript在指定的元素前或后插入新元素

javascript在指定的元素前或后插入新元素

在前几篇的博文中,我们说了利用appendChild方法可以在DOM文档流中指定的元素后追加利用createElement方法和createTextNode方法创建的新元素,但是appendChild...

JavaScript中for...in 语句详解

JavaScript中for...in 语句详解

在编程中我们会使用到各式各样的循环语句,以使我们可以对一个数组进行读操作或是写入赋值的操作,当然在javascript中这少不了这样的循环语句的存在。今天记录一下关于JavaScript for......

JaveScript操作DOM节点的childNodes属性

JaveScript操作DOM节点的childNodes属性

在一棵节点树上(DOM文档),childNodes属性可以获取任何一个节点下的所有子元素节点,它获取的值是一个包含这个元素全部子元素的数组,但是这个数组中包含的东西太多,几乎每一样东西都是一个节点,甚...

jQuery获取当前页面的URL信息

在网站时不少客户要求导航条具有高亮功能,如果换到以前肯定是一个页面一个页面的去写代码,那样的话太麻烦,而且还不利于后期的维护和修改。不过现在有了jQuery了可以省去好多的事,再麻烦的事不就是一行JQ...

jQuery中的jQuery.noConflict()函数说明

jQuery中的jQuery.noConflict()函数说明

在jQuery库中,几乎所有的插件都被限制在它的命名空间里,通常全局对象都被很好的储存在jQuery的命名空间里,当jQuery与其它的JavaSscript库使用时不会引起冲突一般情况下jQuery...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。