本章内容：

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. 两个Integer变量a和b，值相等，a==b等于多少？

    Integer a = Integer.valueOf(127); Integer b = Integer.valueOf(127);   Integer c = Integer.valueOf(12 ...

  2. 关于js中原生构造函数的继承

    前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...

  3. Wpf开源收集

    1,到底有哪些开源MVVM框架? 前面介绍了WPF的基本概念和一些相关知识,我们了解到开发WPF应用程序可以使用现成的框架和模式,最为合适的莫过于时下正热的MVVM模式,所以这里我们也列出针对MVVM ...

  4. dm_analysis

    # -*- coding: utf-8-*- # import sys import os import io import json reload(sys) sys.setdefaultencodi ...

  5. webRTC中音频相关的netEQ（二）：数据结构

    上篇(webRTC中音频相关的netEQ(一):概述)是netEQ的概述,知道了它主要是用于解决网络延时抖动丢包等问题提高语音质量的,也知道了它有两大单元MCU和DSP组成.MCU 主要是把从网络收到 ...

  6. [蓝桥杯]PREV-22.历届试题_国王的烦恼

    问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...

  7. Hbase常见错误解决方法

    Hbase常见错误解决方法 原文转载至:https://www.jianshu.com/p/5fd74812c56c   我是通过maven管理的依赖,直接修改maven依赖中hbase的版本就可以了 ...

  8. 1、redis 基础

    1.1 导言 如果你从来没使用过 Redis 数据库,那你肯定会问,为什么我们要学 Redis数据库,我只使用 MySQL 或 Oracle 就够了.其实 Redis 虽叫数据库,可又不是传统意义上的 ...

  9. 微信小程序企业给零钱打款 提示未配置api发起，请查看产品中心企业付款配置

    商户平台:

  10. python定时器

    1.定时器用法 [1]需要注意的就是创建定时器后,会创建一个线程,程序退出之前需要调用cancel()函数关闭定时器,否则程序退不出. # -*- coding: utf-8 -*- import o ...