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每日一学,每天进步一点点!

(全文完)

 

你可能感兴趣的:(JavaScript,js,学习)