Javascript每日一学

虽然不知道口语考得怎么样，但总算是解脱了。又有心情写写代码了，今天学到看《Javascript DOM编程艺术》的第七章，学到了3个新的方法。他们分别是:

• createElement
• createTextNode
• appendChild

第一个createElement方法能够创建一个元素，像var node = document.createElement("p")，这样你就创建了一个段落元素。但现在它还没有被插入进我们的文档DOM，换句话说，它还是一个单独的个体。要想把它插入我们的DOM，还需要使用另外一个方法appendChild。

appendChild给当前的元素节点添加一个子节点，这样使用currentElement.appendChild(node)。这样就给currentElement元素添加了一个子节点node。node可以是文本节点，元素节点和属性节点。

好了，现在元素节点已经创建并将其添加到文档DOM中了，但是它还只是一个元素节点，在浏览器中显示的话就是一片空白。我们得给它添加一些文本子节点。创建文本节点的函数是createTextNode，这样使用，var text = createTextNode(string); text变量保存的就是这个创建好了的文本节点。
这些就是我对这3个方法的理解，我还做了一个小小的demo。

在浏览器中文档的显示效果是：

它的源代码是：

可以看出来在HTML源代码中并没有第二个<p>标签，它是我在JS中创建出来的。完整的JS代码：

1 2 3 4 5 6 7 8 9 10

function createContent() { //创造一些元素节点和文本节点使用 createElement和createTextNode 函数 //首先创造一个 节点 ，再向其插入一个文本节点，OK，Let's go! var text = document.createTextNode("这是使用DOM方法createTextNode创建的一个文本节点，他在源文档中并不存在."); var para = document.createElement("p"); para.appendChild(text);        //将文本节点插入P document.body.appendChild(para);        //将P插入文档 }

OK,这就是今天学到的一点JS知识，希望里面的内容对你有用。Javascript每日一学，每天进步一点点！

（全文完）

若非注明，均为原创文章，转载请注明： 转载自大笨兔博客