本章内容：

1、动态创建html内容的“老”技巧：document.write()和innerHTML属性

2、DOM方法：createElement(),creatTextNode(),appendChild(),insertBefore().

一、document.write()

语法：document.write(“ ”)

document.write(变量)

缺点：违背了“分离js”原则。即使把document.write语句挪到外部函数里，还是需要在html文档的<body>部分使用<script>标签才能调用那个函数。

二、innerHTML属性

innerHTML属性没有细节可言，要想获得细节，就必须使用DOM方法和属性。

三、DOM提供的方法

1、createElement（）方法

语法：document.createElement(nodeName)

举例：document.createElement("p");

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

window.onload = function() {
var para = document.createElement("p");
var info = "nodeName: ";
info+= para.nodeName;
info+= " nodeType: ";
info+= para.nodeType;
alert(info);
}

2、appendChild（）方法

语法：parent.appendChild（child）

举例：var testdiv = document.getElementById("testdiv");

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

testdiv.appendChild(para);

3、createTextNode（）方法

语法：document.creatTextNode(text)

举例：var txt = document.createTextNode("Hello world");

para.appendChild(txt);

window.onload = function() {

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

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

testdiv.appendChild(para);

var txt = document.createTextNode("Hello world");

para.appendChild(txt);

}

综合举例：

<p>This is <em>my</em> content.</p>

这些html内容对应着一个p元素节点，它本身又包含以下几个子节点

1，一个文本节点，其内容是“This is”

2，一个元素节点，这个元素节点的名字是“em”；这个元素节点还包含着：

（1），一个文本节点，内容是“my”

3，一个文本节点，其内容是“ content.”（第一个字符是空格，最后一个字符是英文句号）。

window.onload = function() {

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

var txt1 = document.createTextNode("This is ");

para.appendChild(txt1);

var emphasis = document.createElement("em");

var txt2 = document.createTextNode("my");

emphasis.appendChild(txt2);

para.appendChild(emphasis);

var txt3 = document.createTextNode(" content.");

para.appendChild(txt3);

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

testdiv.appendChild(para);

}

《DOM Scripting》学习笔记-——第七章 动态创建html内容的更多相关文章

  1. 第七章 动态创建HTML内容

    javascript也可以改变网页的结构和内容 document.write()方法 可以方便快捷地把字符串插入到文档里 document.write("<strong>hell ...

  2. JVM学习笔记-第七章-虚拟机类加载机制

    JVM学习笔记-第七章-虚拟机类加载机制 7.1 概述 Java虚拟机描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被 ...

  3. [Python学习笔记][第七章Python文件操作]

    2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...

  4. o'Reill的SVG精髓（第二版）学习笔记——第七章

    第七章:路径 所有描述轮廓的数据都放在<path>元素的d属性中(d是data的缩写).路径数据包括单个字符的命令,比如M表示moveto,L表示lineto.接着是该命令的坐标信息. 7 ...

  5. d2.js学习笔记（七）——动态SVG坐标空间

    目标 在这一章,我们将学习如何使SVG坐标空间是动态的,这样我们的数据可视化不论数据是什么,都始终是可见的. 我们会使得SVG坐标空间尺度上调或下调来适于我们的数据. 三个SVG长方形 我们就从三个长 ...

  6. 学习笔记 第七章 使用CSS美化超链接

    第7章  使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1  定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...

  7. 《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学

    五.社工工程学     5.1社会工程系框架          5.1.1信息搜集                 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时 ...

  8. 《机器学习实战》学习笔记第七章 —— AdaBoost元算法

    主要内容: 一.提升方法与AdaBoost算法的简介 二.AdaBoost算法 三.代码解释 一.提升方法与AdaBoost算法的简介 1.提升方法:从弱学习算法出发,反复学习,得到一系列弱分类器(又 ...

  9. unix高级环境编程学习笔记第七章（未完）

    博客地址:http://www.cnblogs.com/zengjianrong/p/3222081.html 7.1 引言 Main函数调用:命令行参数:存储器布局:如何分配存储器:进程使用env: ...

随机推荐

  1. homework 张一刚

    #include<stdio.h> #include<unistd.h> #include<sys/types.h> #include<sys/stat.h& ...

  2. js 获取url中的参数 修改url 参数 移除url参数

    js 获取url中的参数 修改url 参数 移除url参数 var jsUrlHelper = { getUrlParam : function(url, ref) { var str = " ...

  3. HttpClient 上传图片

    Image image = Image.FromFile(@"F:\image2\DSC02028.JPG"); var data = ImageToByteArray(image ...

  4. for XML path 转义

    select (SELECT 'ab<&c' FOR XML PATH(''),TYPE).value('.','NVARCHAR(MAX)')

  5. CSS3 Vendor-prefixing

    Browser vendors needed a way to add support for new features that were not yet standardized, but wit ...

  6. 【mysql】字段类型和长度的解释

    int(11)最大长度是多少,MySQL中varchar最大长度是多少? int(11)最大长度是多少? 在SQL语句中int代表你要创建字段的类型,int代表整型,11代表字段的长度. 这个11代表 ...

  7. awesome资源包

    .NET资源包 https://github.com/jobbole/awesome-dotnet-cn java资源包 https://github.com/jobbole/awesome-java ...

  8. 7.8 paint.c 程序

    ## 7.8 paint.c 程序 #include <stdio.h> #define COVERAGE 350 // 每罐尤其可刷的面积(单位:平方英尺) int main(void) ...

  9. Notification之适配总结

    11. android通知栏8.0系统报错误: NotificationService: No Channel found for pkg=xxx.xxx.xxx, channelId=12345, ...

  10. consul配置参数大全、详解、总结

    命令行选项 以下选项全部在命令行中指定. -advertise - 通告地址用于更改我们通告给集群中其他节点的地址.默认情况下,-bind地址是通告的.但是,在某些情况下,可能存在无法绑定的可路由地址 ...