首先，我们有一个编辑器，有一个简单的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. Java编程环境eclipse配置

    一. 下载并安装JDK https://www.cnblogs.com/zhangchao0515/p/6806408.html 二.下载并解压Eclipse https://www.cnblogs. ...

  2. httpclient:Ip 代理

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

  3. 3-C++程序的结构1.2

    对象的生存周期 可以分为静态生存周期和动态生存周期 1.静态生存周期 如果对象的生存期与程序的运行期相同,我们称它具有静态生存期.在文件作用域中声明的对象都具有静态生存期的.如果要在函数的块中声明具有 ...

  4. TypeScript完全解读(26课时)_10.TypeScript完全解读-枚举

    10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以 ...

  5. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  6. [CVE-2017-8464]Microsoft Windows远程命令执行漏洞复现

    版权声明:本文为博主的原创文章,未经博主同意不得转载 前言 记录下自己的复现,保留意见 2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快 ...

  7. Lightoj 1129【字典树】

    题意:如果存在一个串是另一个串的公共前缀就是NO,否则就是YES 思路:利用字典树的特性搞搞就好了 #include <bits/stdc++.h> using namespace std ...

  8. IT兄弟连 JavaWeb教程 EL表达式中的运算

    EL语言支持算符运算符.关系运算符和逻辑运算符等,以完成常见的数据处理操作.所有的运算符说明见表7.2. 表2  El表达式中的运算符

  9. A - Wireless Network

    #include <cstdio> #include <algorithm> #include <cstring> #include <iostream> ...

  10. Vue文件 引入.js文件 的组件

    Vue.component('remote-script', { render: function (createElement) { var self = this; return createEl ...