文档章节

javaScript---传统的DOM动态添加标签与内容

麦小雄
 麦小雄
发布于 2015/09/22 18:18
字数 369
阅读 18
收藏 0

传统为文本添加内容的方法DOM提供的write与innerHTML:

document.write()方法将文本的表现与行为混合在一起,即将行文方法写在了文本的内容中,当浏览器不支持JavaScript或者用户禁掉了浏览器的JavaScript功能时,用户将得不到其需要的内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WriteTest</title>
</head>
<body>
<script>
document.write("<p>传统的DOM方法:document.write()</p>");
</script>
</body>
</html>

innerHTML方法:

innerHTML相比较于上面的Write()方法,更加的灵活多变。它不仅可以读取内容同时还能把内容写进你需要的地方。innerHTML还支持行为与表现分离,不需要像write()那样将方法写进文本的内容中。但是innerHTML忽略了文本内容的细节,它只能将文本的内容进行全部替换,当你仅仅只想插进某一部分时,那么将不是最好的选择。

从文本中读取内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>innerHTMLTest</title>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("innerHTML_get").innerHTML);
  }
</script>
</head>
<body>
<div id="innerHTML_get">
<p>This is<em>a test</em>content</p>
</body>
</html>

将内容写进文本中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>innerHTMLTest</title>
<script type="text/javascript">
function setInnerHTML()
  {
  var testdiv = document.getElementById("innerHTML_set");
  testdiv,innerHTML="<p>This is<em>a test</em>content</p>";
  }
</script>
</head>
<body>
<div id="innerHTML_set"></div>
</body>
</html>


© 著作权归作者所有

麦小雄
粉丝 0
博文 7
码字总数 2666
作品 0
广州
程序员
私信 提问
高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更...

Junn
2014/10/10
348
2
BigPipe:高性能的“流水线技术”网页

原文地址:http://www.facebook.com/note.php?note_id=389414033919 译文地址:http://isd.tencent.com/?p=2419 作者:蒋长浩 Facebook的网站速度做为最关键的公司任务之一。在2009年,我们成...

晨曦之光
2012/03/09
134
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
58
0
前端入门6-JavaScript客户端api&jQuery

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/11/01
0
0
细谈在HTML中使用JavaScript

细谈在HTML中使用JavaScript 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌...

幸运券发放
2018/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
12
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部