本章内容：

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. LVS中Windows作为真实主机(RealServer)时的设置方法

    最近,公司新推了一个电商项目,IIS+ASP.而上面大大规划了要用 LVS 负载均衡集群,在这个技术陈旧的企业,LVS 项目还是去年才真正推行.由于最开始是由我测试的,所以这次的部署又落到了我头上了. ...

  2. Day11字符串 title

    一.title 二.join------将字符串中的每一个元素按照指定分隔符进行拼接. 三.ljust rjust center    左.右.中间填充 四.lower  islower   uppe ...

  3. 2019春招——Vivo大数据开发工程师面经

    Vvio总共就一轮技术面+一轮HR面,技术面总体而言,比较宽泛,比较看中基础,面试的全程没有涉及简历上的东西(都准备好跟他扯项目了,感觉是抽取的题库...)具体内容如下: 1.熟悉Hadoop哪些组件 ...

  4. 前端-JavaScript2-5——JavaScript之运算符进阶

    运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 运算符的分类见仁见智,我们的课程对运算符进行如下分类: 数学运算符(Arithmetic operators) 比较运算符(Co ...

  5. 用最简单的话告诉你什么是ElasticSearch

    介绍 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 L ...

  6. Complete Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  7. 使用Git Bash从Git上下载代码到本地以及上传代码到码云Git

    前提是在码云上已经新建一个空的项目,可参考:https://www.cnblogs.com/babysbreath/p/9170455.html 1.新建一个目录,存放下载下来的项目,我在D盘新建了一 ...

  8. jenkins使用git拉取gitlab代码

    1 在安装jenkins的主机上新加一个jenkins用户, 切换到jenkins用户登录, 生成公钥私钥ssh-keygen -t rsa -C "your email" -f ...

  9. thinkphp中插入ueditor编辑器的代码

    1.需要在header中加入以下js内容:<script type="text/javascript" src="{$smarty.const.__ROOT__}/ ...

  10. springboot学习三：整合jsp

    在pom.xml加入jstl <!--springboot tomcat jsp 支持开启--> <dependency> <groupId>org.apache. ...