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

墨初学习笔记2381

在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标签追加到文楼中去	

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

相关文章

JS实现上传头像并实时预览

JS实现上传头像并实时预览

说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是...

LAMP和LNMP,你更愿意选择谁,为什么?

这几天一直在捣鼓服务器的网站环境,不知道是装apache好,还是装nginx好。这不又开始找百度,查资料,看看大神们怎么说的。lamp 的全称是linux + apache + mysql +phpl...

PHP 字符串计算 strlen、strpos 与 strrpos 函数

今天无聊一直逛PHP的论坛,顺便弄点有用的东西保存下来,正好很多时间没有更新博客了,今天说说PHP中一些字符串计算的函数,如果我说的不对,还请大神们在下方的评论处留言,并指正一二。计算字符串的长度或定...

javascript中的addLoadEvent函数解析

javascript中的addLoadEvent函数解析

onload事件是HTML DOM Event 对象的一个属性,又叫事件句柄(Event Handlers),它会在页面或图像加载完成后(注意是加载完成后)立即发生。window.onload = f...

这是问斩的标题

这是问斩的标题

很多的网站,尤其是一些手机官网或某种产品的官网,都会把自己网站的页面中一些元素作得美观起来。比如一些产吕,在打开网页或网页下拉到产品图片的时候,图片就像活了一样动起来,很是有趣。今天介绍一款,让网页元...

PHP+MySQL网站打开速度的几个因素

PHP+MySQL网站打开速度的几个因素

这几天有客户订制了一款主题,当然这款主题已经在zblog的应用中心开始审核,至于结果怎么样,还请大家关注我的博客。审核通过后,我会在博客里告诉大家一声的。当然本站用的自己写的主题《墨初VIP主题》还在...

发表评论    

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