《DOM Scripting》学习笔记-——第七章 动态创建html内容
本章内容:
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内容的更多相关文章
- 第七章 动态创建HTML内容
javascript也可以改变网页的结构和内容 document.write()方法 可以方便快捷地把字符串插入到文档里 document.write("<strong>hell ...
- JVM学习笔记-第七章-虚拟机类加载机制
JVM学习笔记-第七章-虚拟机类加载机制 7.1 概述 Java虚拟机描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被 ...
- [Python学习笔记][第七章Python文件操作]
2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...
- o'Reill的SVG精髓(第二版)学习笔记——第七章
第七章:路径 所有描述轮廓的数据都放在<path>元素的d属性中(d是data的缩写).路径数据包括单个字符的命令,比如M表示moveto,L表示lineto.接着是该命令的坐标信息. 7 ...
- d2.js学习笔记(七)——动态SVG坐标空间
目标 在这一章,我们将学习如何使SVG坐标空间是动态的,这样我们的数据可视化不论数据是什么,都始终是可见的. 我们会使得SVG坐标空间尺度上调或下调来适于我们的数据. 三个SVG长方形 我们就从三个长 ...
- 学习笔记 第七章 使用CSS美化超链接
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
- 《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学
五.社工工程学 5.1社会工程系框架 5.1.1信息搜集 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时 ...
- 《机器学习实战》学习笔记第七章 —— AdaBoost元算法
主要内容: 一.提升方法与AdaBoost算法的简介 二.AdaBoost算法 三.代码解释 一.提升方法与AdaBoost算法的简介 1.提升方法:从弱学习算法出发,反复学习,得到一系列弱分类器(又 ...
- unix高级环境编程学习笔记第七章(未完)
博客地址:http://www.cnblogs.com/zengjianrong/p/3222081.html 7.1 引言 Main函数调用:命令行参数:存储器布局:如何分配存储器:进程使用env: ...
随机推荐
- 利用工具将数据库中的表导出到word中
1.动软代码生成器 效果图: 数据库设计说明书中的一项,刚好我负责写这个文档, 18张表,前两张表是自己画表格自己填充内容,写到第三张表的时候就已经崩溃了(我觉得我耐力还是够的,怎么说也画完了两张表呢 ...
- v4l2框架分析
参考:https://www.cnblogs.com/fengong/p/4424823.html http://www.cnblogs.com/fengong/p/4424895.html 一 ...
- ZoomIt: 非PPT演示必备辅助软件
下载地址:https://docs.microsoft.com/zh-cn/sysinternals/downloads/zoomit 使用方法: 另一个免费的屏幕标注工具:Pointofix v1. ...
- 【json】与【枚举】的序列化和反序列化
参考:Jackson – Deserialization from json to Java enums 问题描述 java中使用枚举时,如果涉及到restful调用,不可避免会涉及到枚举的序列化和反 ...
- CentOS 与Ubuntu 下配置IP地址
1.CentOS配置方法如下: 用vi打开配置文件 [root@haha3 ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0 写入以下配置 DEVIC ...
- Spring boot加载REACTIVE源码分析
一,加载REACTIVE相关自动配置 spring boot通过判断含org.springframework.web.reactive.DispatcherHandler字节文件就确定程序类型是REA ...
- 配置中心Nacos
Nacos 是阿里巴巴2018年7月份开源的项目,如其名, Naming Configuration Service ,专注于服务发现和配置管理领域. Nacos 是什么?上面已经大概介绍了,更多详细 ...
- python 进程/线程/协程 测试
# Author: yeshengbao # -- coding: utf-8 -- # @Time : 2018/5/24 21:38 # 进程:如一个人拥有分身(分数数最好为cpu核心数)几乎同时 ...
- Oracle数据库中序列(SEQUENCE)的用法详解
Oracle数据库中序列(SEQUENCE)的用法详解 在Oracle数据库中,序列的用途是生成表的主键值,可以在插入语句中引用,也可以通过查询检查当前值,或使序列增至下一个值.本文我们主要介绍了 ...
- 5DAY高级权限
5DAY高级权限 0xff001 suid\sgid\sticky ; s\s\t ; 4\2\1特殊位 001.描述 suid,sgid针对文件程序时,具备临时提升权限 sgid 针对目录时,该目录 ...