首先，我们有一个编辑器，有一个简单的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. dumpbin检查Dll

    用dumpbin.exe工具查看DLL,dumpbin.exe是VS自带的工具.版本VS2013,路径是:G:\VS2013\VC\bin\amd64\ 可以看到dumpbin.exe. 使用VS里的 ...

  2. Linux命令行设置环境变量

    参考  Linux命令行--使用linux环境变量  Linux命令行—使用Linux环境变量

  3. 1.16 sqoop options-file参数进行运行任务

    sqoop的options-file参数可以像hive的-f 参数那样,执行一个脚本文件,而不是直接在命令行执行: 其中,此脚本文件要遵循一定的格式:参考链接:http://sqoop.apache. ...

  4. 天天连萌UE分析

    1.开始游戏消耗心,有消耗动画,[可以使用到副本次数上] 2.关卡结束,是个可爱的动画,[可以是潇洒的动画,一个吹箫的潇洒老翁或者帅哥] 3.点击爽快感:点击配对成功飘字及时且快速,[字体漂亮--潇洒 ...

  5. CSproject文件总是在Solution中被修改PROJECT GUID问题

    1.情况: 打开2个Solution 一个是client,一个是server 他们会互相修改GUID,切换solution的时候都会显示 xxxxx已经被外部修改云云 2.原因: 一般是在其中一个So ...

  6. 监控利器---Zabbix（一）

    开源监控软件对比 Cacti(英文含义仙人掌) 是一套基于PHP.MySQL.SNMP和RRDtool开发的网络流量监测图形分析工具,它通过snmpget来获取数据使用RRDtool绘图,简化RRDt ...

  7. [Xcode 实际操作]一、博主领进门-(7)使用不同类型的iOS模拟器

    目录:[Swift]Xcode实际操作 本文将演示使用不同类型的iOS模拟器. 点击[运行]按钮,打开模拟器,并预览当前的项目. 当向苹果商店提交应用时,也需要同时提交应用的截图. 对当前的应用的界面 ...

  8. [Xcode 实际操作]九、实用进阶-(15)屏幕截屏：截取当前屏幕上的显示内容

    目录:[Swift]Xcode实际操作 本文将演示如何截取屏幕画面,并将截取图片,存入系统相册. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UI ...

  9. web.xml中一个filter配置多个url-pattern

    需要在filter标签后添加多个filter-mapping标签,一个url-pattern就对应一个filter-mapping标签,不能直接把多个url-pattern配置到同一个filter-m ...

  10. js-metisMenu

    metisMenu是js的菜单插件,可以实现可折叠的二级菜单效果. 1 bootstrap折叠(Collapse) 直接引用bootstrap.js或者bootstrap.min.js就可以支持该插件 ...