首先，我们有一个编辑器，有一个简单的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. MongoDB -- 安装(win 10)

    1. 下载安装包: mongodb-win32-x86_64-2008plus-ssl-4.0.10-signed.msi https://www.mongodb.com/download-cente ...

  2. httpclient:Ip 代理

    参考:http://blog.csdn.net/sdfiiiiii/article/details/70432060  http://blog.csdn.net/qy20115549/article/ ...

  3. Flutter实战视频-移动电商-59.购物车_计算商品价格和数量

    59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...

  4. UVa 11825 Hackers' Crackdown (状压DP)

    题意:给定 n 个计算机的一个关系图,你可以停止每台计算机的一项服务,并且和该计算机相邻的计算机也会终止,问你最多能终止多少服务. 析:这个题意思就是说把 n 台计算机尽可能多的分成一些组,使得每组的 ...

  5. E20190402-hm

    porxy n. 代理服务器; 代表权; 代理人,代替物; 委托书; enroll  v. 招收; 注册; 登记; 加入; enrollment n. 注册; 登记; 入会;

  6. C# interface 的特性 无法被implement class继承

    最近做interface添加特性后,implement class 无法继承. 微软要求class是实现Interface而不是继承,所以我们必须手动添加特性,而不能自动继承. 对于abstract ...

  7. random 库

    random 是使用随机数的python 标准库 ——为随机数:采用梅森旋转算法生成的(伪)随机序列中的元素 —— import random 基本随机数函数:seed(),random() 扩展随机 ...

  8. FMDB存储模型对象（以二进制存储）用NSKeyedArchiver archivedDataWithRootObject序列号，NSKeyedUnarchiver unarchiveObjectWithData反序列化（重点坑是sql语句@"insert into t_newsWithChannel (nwesName,newsType) values (?,?)"）一定要用占位符

    交友:微信号 dwjluck2013 一.封装FMDB单例 (1)JLFMDBHelp.h文件 #import <Foundation/Foundation.h> #import < ...

  9. Zynq7000开发系列-5（OpenCV开发环境搭建：Ubuntu、Zynq）

    操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...

  10. flask_之参数传递

    参数篇 request接收数据 request对象 method:当前请求方法(POST,GET等) url:当前链接地址 path:当前链接的路径 environ:潜在的WSGI环境 headers ...