首先，我们有一个编辑器，有一个简单的HTML页面，页面的级别分别 --> html  -->head[title，meta，script，link] -- body，然后再新建一个index.js页面，专门编写javascript代码。后面再建一个style.css页面。

html页面

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>DOM</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <script src="js/Demo.js"></script>

</head>

<body>

    <div class="main" id="main">

        <center>

            <div id="test"></div>

        </center>

    </div>

</body>

</html>

css页面

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,video

{margin:; padding:; border:; font-size: 100%; font: "Microsoft Himalaya"; vertical-align:baseline;}

body

{font-size: 1.025rem;}

/*固定css样式--顶部代码*/

.main

{position:absolute;top:;bottom:;left:;right:;background-color:#b9b7b7;}

.main center

{position:absolute;top:2%;bottom:2%;left:1%;right:1%;background-color:#ffffff;border-radius:12px;}

.main center div#test

{position:relative;margin:1% auto;padding:6px 0px;background:rgba(242, 248, 248, 0.93);border:1px solid rgba(241, 242, 243, 0.95);box-shadow:2px 0px 2px #ffffff;}

css

javascript页面

function div(){

    var test = document.getElementById("test");

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

    var i = document.createElement("i");

    var text = "this is javaScript";

    var here = document.createTextNode(text);

        i.appendChild(here);

        p.appendChild(i);//在p内增加一个i文本

        test.appendChild(p);//在div内增加一个p节点

}

此时，在web浏览器看到页面上显示的信息，this isjavascript英文字斜的表示用了<i>标签。

在html页面，我们只是在body内给div块新建了一个id，然后，在javascript内通过getElementById(id)获取页面的id即可，后面通过appendchild来给节点添加子节点，就这样一步一步走，不出意外，就可以实现我们想要的。

还没有完，之前我们没有说如何在页面上加载js函数，所以在javascript页面的function div(){}后面还要再加一行代码。 window.onload=div;

写到这里，也就搞定了，当然这些都是基础，如果内容有问题，希望您提出来，以免误导其他人学习，我希望大家互相成长。^_^

JavaScript（appendChild添加节点）的更多相关文章

  1. [简洁]JavaScript中添加、移除、移动、复制、创建和查找节点元素

    查找: document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合. document.getElementsByClassName通过类名获取元素,同上 ...

  2. JavaScript案例二：在末尾添加节点

    简单实现通过JavaScript来增加HTML节点 <!DOCTYPE html> <html> <head> <title>JavaScript在末尾 ...

  3. JavaScript实验一(添加节点，删除节点)

    静态html页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. JavaScript基础1——在末尾添加节点

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js实现在末尾添加节点

    在末尾添加节点: 1.获取ul标签 2.创建li标签 document.createElement("标签名称")方法 3.创建文本 document.createTextNode ...

  6. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  7. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  8. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  9. javascript所有的节点和方法

    属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储节点的子节点列表(只读) 3.dataType 返回此节点的数据类型 4.Definition 以DTD或X ...

随机推荐

  1. 多线程之----定时器TIMER

    结上一篇  多线程的简单介绍  http://www.cnblogs.com/duanxiaojun/p/6595847.html 在上一讲中我主要是对多线程学习这个系列做了一个大致的学习计划,然后对 ...

  2. 常用的网站站长SEO工具

    网站管理员工具 网站管理员工具需要对网站域名所有权进行验证,通常是通过上传指定文件.增加META或者修改网站DNS来验证管理员身份,通过验证后,网站管理员可以查询到自己网站的各类统计信息. 1. Go ...

  3. 移动端UI资源

    1.Flat UI Free http://designmodo.github.io/Flat-UI/ 2.POP 原型工具 http://mobilehub.io/products/pop 3.ei ...

  4. python-re使用举例

    代码: import re text = "JGood is a handsome boy, he is cool, clever, and so on..." print(tex ...

  5. web调试利器_fiddler

    此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.fiddler简介 直接引用官网介绍 The free web debugging proxy for a ...

  6. Codeforces Round #269 (Div. 2) A,B,C,D

    CodeForces - 471A 首先要有四个数相等,然后剩下两个数不同就是Bear,否则就是Elephant. #include <bits/stdc++.h> using names ...

  7. 51nod1010【二分】

    打表+二分 #include <bits/stdc++.h> using namespace std; typedef long long LL; const LL inf=1e18+10 ...

  8. Mysql相关函数使用和总结（cast、convert）

    一.类型转换 1.获取一个类型的值,并产生另一个类型的值,CAST()和CONVERT()函数. 用法: CAST(value as type); CONVERT(value, type); 解释:C ...

  9. 最长上升序列（Lis）

    Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...

  10. IP服务-6-SNMP

    SNMP(简单网络管理协议) SNMP更为正式的说法是互联网标准管理框架(Internet Standard Management Framework).在这个协议架构中.被管理的设备(SNMP代理) ...