本章内容：

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. 【代码问题】MatConvNet+VS2017编译找不到cl.exe错误

    用vl_compilenn做普通的CPU编译报错: 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 错误使用 vl_compilenn>check_clpath (li ...

  2. 使用OwnCloud搭建自己的云盘

    使用OwnCloud搭建自己的云盘 1.用途 ownCloud是一款开源的私有云框架,可以通过它实现个人网盘的功能,ownCloud提供了各个平台的文件同步客户端,因此搭建好ownCloud之后即可使 ...

  3. JAVA中的算法

    线性排序 冒泡排序 package com.jiedada.creat; public class maopao { public static void main(String[] args) { ...

  4. 《重构-改善既有代码的设计》学习笔记---Replace Temp with Query（以查询取代临时变量）

    临时变量的问题在于: 它们是暂时的,而且只能在所属函数内使用.由于临时变量只在所属函数内可见,所以,如果很多地方都在用这个临时变量,就会驱使你写出更长的函数.如果把临时变量替换为一个查询,那么其他函数 ...

  5. Django框架 连接Oracle -ServerName方式报错

    连接前: 修改后:

  6. RAMOS （内存操作系统）-无忧百科（不断完善中）

    RAMOS (内存操作系统)-无忧百科(不断完善中) - RAMOS - 无忧启动论坛 - Powered by Discuz! http://bbs.wuyou.net/forum.php?mod= ...

  7. awk命令基本使用方法

    awk命令 基本用法 awk '{print $1, $4}' netstat.txt 单引号中大括号的部分就是awk语句 $1至$n表示第几列,$0表示整行 格式化输出的方法 $ awk '{pri ...

  8. 20175311 2018-2019-2 《Java程序设计》第7周学习总结

    20175311 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 这一周我主要学习了第八章的内容-常用实用类String类 构造String对象 字符串的并置 ...

  9. python之路——17

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.迭代器2.生成器3.内置函数 1.学习55个 2.带key的,max min filter map ...

  10. JAVA之Mybatis基础入门--框架搭建与简单查询

    JAVA中,操作数据库有JDBC.hibernate.Mybatis等技术,今天整理了下,来讲一讲下Mybatis.也为自己整理下文档: hibernate是一个完全的ORM框架,是完全面向对象的.但 ...