首先，我们有一个编辑器，有一个简单的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. 第三篇：SpringBoot用JdbcTemplates访问Mysql

    本文介绍springboot通过jdbc访问关系型mysql,通过spring的JdbcTemplate去访问. 准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: ...

  2. linux中的调试知识---基础gdb和strace查看系统调用信息，top性能分析，ps进程查看，内存分析工具

    1 调试一般分为两种,可以通过在程序中插入打印语句.有点能够显示程序的动态过程,比较容易的检查出源程序中的有关信息.缺点就是效率比较低了,而且需要输入大量无关的数据. 2 借助相关的调试工具. 3 有 ...

  3. Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解

    11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yam ...

  4. Ubuntu16.04 安装Python3.6 报错

    问题: 在安装Python 3.6,执行make install 时出现以下错误: zipimport.ZipImportError: can't decompress data; zlib not ...

  5. springboot2 -广播式WebSocket

    1.WebSocket,STOMP,SockJS含义 WebSocket:WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. SockJS:SockJS 是 We ...

  6. LeetCode: 500 Keyboard Row (easy)

    题目: Given a List of words, return the words that can be typed using letters of alphabet on only one ...

  7. SQL Server知识详解

    1.SET NOCOUNT ON的作用: 作用:阻止在结果集中返回显示受T-SQL语句或则usp影响的行计数信息. 语法:SET NOCOUNT {ON | OFF} 详解:当SET ONCOUNT ...

  8. 利用YYLabel 进行图文混排+高度计算

    利用YYLabel 进行图文混排+高度计算 1.项目需求: 用一个控件显示图片和文字,并且依据图片和文字动态计算控件的高度. 2.方案: 利用YYLabel控件和属性字符串处理. 注:(在使用YYLa ...

  9. Codeforces764C【DFS】

    前言,根据最终图的样貌搞真厉害 "缩点判根度为结点数-1"牛逼 ----- 题意: 找一个根使得不带根的所有子树内部颜色都相同: 思路: 如果存在两个颜色不一样的连在一起,根就是他 ...

  10. Unity3D教程：无缝地形场景切换的解决方法

    http://www.unitymanual.com/6718.html 当我们开发一个大型项目的时候-会遇到这样的问题(地形场景的切换)这个只是字面意思-并不是重场景1的100  100 100坐标 ...