《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: ...
随机推荐
- 百度UEditor的config.json
配合自己修改的.net core DLL使用 /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": &qu ...
- nis+kerberos 实现服务验证
1.NIS部分 1.1 简介 NIS(Network Information Service,or Yellow Page or YP) 网络信息服务,由sun公司开发并授权给unix供应商, ...
- Python 模块源
1.官方:https://pypi.org/ 2.LFD UCI :https://www.lfd.uci.edu/~gohlke/pythonlibs/ 4.清华源:https://pypi.tun ...
- JavaScript易混淆的零碎知识点积累
1.callee属性 和 caller属性. 区别:两者的调用对象不同 arguments.callee:指向拥有这个arguments对象的函数,在递归运算中经常用到. functionName.c ...
- IOS屏幕旋转思路和实践
这段时间同事在做一个直播项目,项目有个需求:一个界面需要手动设置屏幕的方向,设置好之后方向不能变化.完成这个需求花了特别大的精力,归因是网上关于屏幕旋转的知识比较凌乱,解决问题花费不少时间,最后决定把 ...
- 13行代码实现:Python实时视频采集(附源码)
一.前言 本文是<人脸识别完整项目实战>系列博文第3部分:程序设计篇(Python版),第1节<Python实时视频采集程序设计>,本章内容系统介绍:基于Python+open ...
- FastSocket客户端/服务端通讯示例 客户端被动接收
示例代码参见 http://www.cnblogs.com/T-MAC/p/fastsocket-asyncbinary-usage.html 我这里只写一份客户端如何被动接收的代码. 先从As ...
- JAVA的单元测试技术
1.选定开发工具 选定eclipse为开发工具,用JAVA进行编程,实现此次测试. 2.编写需要被测试的java类 此次我们以顺序查找与二分查找法为例. package com.mycode.tuil ...
- Linux 信号signal处理函数
转自:http://www.cnblogs.com/taobataoma/archive/2007/08/30/875662.html alarm(设置信号传送闹钟) 相关函数 signal,slee ...
- 简单封装Redis做缓存
基于Redis封装一个简单的Python缓存模块 0. Docker Redis安装 参考: Get Docker CE for CentOS Docker 安装 Redis 安装Docker时错误s ...