《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);

}

时间: 2024-10-26 00:20:51

《DOM Scripting》学习笔记-——第七章 动态创建html内容的相关文章

《Javascript DOM编程艺术》--第七章动态创建标记

向浏览器里的文档动态添加标记的方法: 一. 传统方法:以下两种都是HTML专有的属性,不能用于其他标记语言文档. 1. document.write():最大的缺点是违背了“行为应该与表现分离”的原则. 2. innerHTML 属性:在需要把一大段HTML内容插入一份文档时,innerHTML属性可以又快又简单的完成这个任务.不过,innerHTML属性不会返回任何对刚插入的内容的引用. 在任何时候,DOM都可以来替代innerHTML. 二. 利用DOM方法:DOM是文档的表示. 1. cr

第七章 动态创建HTML内容

javascript也可以改变网页的结构和内容 document.write()方法 可以方便快捷地把字符串插入到文档里 document.write("<strong>hello world.</strong>"); /* function insertP(text){ var str = "<p>"; str += text; str +="</p>"; document.write(str);

Android学习笔记—第七章 数据解析及读取

第七章 数据解析及读取 网络传输中数据的组织方式:xml.json.http (1)xml:可扩展标记语言 特点:保存少量数据,可跨平台 解析方式:sax.dom.pull a. sax解析: 特点:速度快,占用内存少.事件驱动,不会一次性把所有内容加载到内存中. startElement:元素节点开始 localName:不带前缀的标签名 qName:带前缀的标签名 attributes:节点内的属性和值 <student id ="1"> <name>小明&

Java学习笔记—第七章 类的深入解析

第七章 类的深入解析 1. 继承 1.1 类继承的方法:在Java中,子类对父类的继承是在类的声明中使用extends关键字来指明的.其一    般格式为:[类修饰符] class <子类名> extends <父类名>{ 类体内容 }.一个类只能直接继承一个    父类,一个父类可以有多个子类. 1.2 成员变量的继承和隐藏:基于父类创建子类时,子类可以继承父类的成员变量和成员方法.但是,     如果在父类和子类中同时声明了一个同名变量,则这两个变量在程序运行时同时存在.即:父

《Spring实战》学习笔记-第七章:Spring MVC进阶

本章主要内容: 备用的Spring MVC配置项 处理文件上传 控制器中的异常处理 使用flash属性 "等等,客官!不止这些" 也许大家在看电视广告时对上面这句话比较熟悉,广告里通常在已经对商品做了完整的介绍,这时,电视里就会冒出这句:等等,客官,还不止这些...接着,就会继续吹嘘他们的商品还有更多让你意想不到的功能. 其实,Spring MVC(或者说Spring的每一个模块)就给人一种"不止这些"的感觉,就在你以为已经对Spring MVC的功能有了完备的了解

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学

五.社工工程学 5.1社会工程系框架 5.1.1信息搜集 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时无法获取结果,可能是无法与信息提供网站建立连接,可以使用VPN或代理服务器. 5.1.2诱导 1.提高诱导能力 表现自然,学习知识,不要贪心. 2.成功诱导的技巧 迎合目标的自我感觉 表达共同的兴趣 故意给出一个错误的陈述 抛出一些诱饵信息以寻求回报 假装知晓 借助酒精的威力,让目标更容易开口 3.问答的种类 开放式问答:无法只用"是"或&quo

【数据分析 R语言实战】学习笔记 第七章 假设检验及R实现

假设检验及R实现 7.1假设检验概述 对总体参数的具体数值所作的陈述,称为假设;再利用样本信息判断假设足否成立,这整个过程称为假设检验. 7.1.1理论依据 假设检验之所以可行,其理沦背景是小概率理论.小概率事件在一次试验中儿乎是不可能发生的,但是它一以发生,我们就有理由拒绝原假设:反之,小概率事件没有发生,则认为原假设是合理的.这个小概率的标准由研究者事先确定,即以所谓的显著性水平α(0<α<1)作为小概率的界限,α的取值与实际问题的性质相关,通常我们取α=0.1, 0.05或0.01,假设

流畅的python学习笔记第七章:装饰器

装饰器就如名字一样,对某样事物进行装饰过后然后返回一个新的事物.就好比一个毛坯房,经过装修后,变成了精装房,但是房子还是同样的房子,但是模样变了. 我们首先来看一个函数.加入我要求出函数的运行时间.一般来说代码写成如下.但是我有很多个函数都要计算运行时间.每个函数里面都要写一个计时的过程是一件很麻烦的事. def target():     start=time.time()     print 'running target()'     end=time.time()     print e