本章内容：

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. 协程gevent

    协程,利用线程在等待其他资源期间去执行其他的函数. gevent里面封装了greenlet,greenlet里面封装了yield. from gevent import monkey import g ...

  2. Git常用的操作记录(自用)

    分支常用操作命令 $ git branch -a //查看分支 $ git checkout -b dev origin/master  //切换/创建分支 $ git branch -vv 或 gi ...

  3. 将NULL值转化为“”

    // 将NULL转化为“”,1是需要修改的实体类参数,3是转化后的实体对象 String 2= JSON.toJSONString(1, SerializerFeature.WriteNullStri ...

  4. apache2.4+php7.3.2+mysql5.7

    一.下载php7和apache2.4 1 首先下载php7的windows压缩包,到这里下载http://windows.php.net/download/ 我选择的是php7的这个版本,由于它是vc ...

  5. Rhel6.5 相关操作

    Rhel 将光盘挂载动作 操作部分1 挂载光盘 https://jingyan.baidu.com/article/e52e3615a9c19440c60c5121.html ls -l /dev | ...

  6. note10 元组

    元组 Tuple +元组即不可变(immutable)列表 除了可改变列表内容的方法外,其他方法均适用于元组 因此,索引.切片.len().print等均可用 但是,appeng.extend.del ...

  7. [UE4]计算箭头方向：正切、SetRelativeRotation、RotationFromXVector、Get MotionController Thumbstick X

    正切 正弦函数 sinθ=y/r 余弦函数 cosθ=x/r 正切函数 tanθ=y/x 余切函数 cotθ=x/y 正割函数 secθ=r/x 余割函数 cscθ=r/y   已知y和x,求角度θ: ...

  8. sql查询统计

    SELECT TOP 50 (select text from sys.dm_exec_sql_text(sql_handle)) as [SQL], CAST( ((qs.total_elapsed ...

  9. 取消win10 任务栏已固定的软件

    通过组策略编辑器 设置为“已禁用”,就可 ,自由取消已固定的图标.

  10. cesium3dtiles位置改变

    cesium偏移3dtiles高度var heightOffset = 20.0; var boundingSphere = tileset.boundingSphere; var cartograp ...