码迷,mamicode.com
首页 > Web开发 > 详细

JS DOM编程艺术——动态创建标记—— JS学习笔记2015-7-13(第83天)

时间:2015-07-13 23:57:54      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

DOM方法:

1、createElement

语法:document.createElement(nodeName)

比如:document.createElement("p");  // 将创建一个P元素;

 

2、appendChild

语法:parent.appendChild(child)

 

3、creatTextNode

语法:document.createTextNode(text)

 

example.js

/* window.onload = function (){

    var para = document.createElement("p");
    var testdiv = document.getElementById("testdiv");
    testdiv.appendChild(para);
    var txt = document.createTextNode("Hello World");
    para.appendChild(txt); // 注意这里的括号里面不需要加引号 比如:para.appendChild("txt") 这样写就错了;
}
*/
//方法二(因为appendChild方法还可以用来连接那些尚未成为文档树的一部分的节点):


// window.onload = function (){

//     var para = document.createElement("p");
//     var txt = document.createTextNode("Hello World world");
//     para.appendChild(txt);
//     var testdiv = document.getElementById("testdiv");
//     testdiv.appendChild(para);
    
// }

window.onload = function(){

    var para = document.createElement("p");
    var txt1 = document.createTextNode("This is");
    var emphasis = document.createElement("em");
    var txt2 = document.createTextNode("my");
    var txt3 = document.createTextNode(" content.");
    para.appendChild(txt1);
    emphasis.appendChild(txt2);
    para.appendChild(emphasis);
    para.appendChild(txt3);
    var testdiv = document.getElementById("testdiv");
    testdiv.appendChild(para);
}

 

JS DOM编程艺术——动态创建标记—— JS学习笔记2015-7-13(第83天)

标签:

原文地址:http://www.cnblogs.com/zhangxg/p/4644242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!