<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>HTML动态更新</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<div id="mydiv" style="width:150px;">hello <b>Javascript</b></div>
<div id="mydiv2" style="width:150px;">hello <b>Javascript</b></div>
<div id="mydiv3">
<div>
<em>H T M L</em>
<em>空 格替换</em>
</div>
</div>
<div id="div1" style="width:150px;">hello <b>Javascript</b></div>
<div id="div2" style="width:150px;">hello <b>Javascript</b></div>
<div id="div3" style="width:150px;">hello <b>Javascript</b></div>
<div id="div4" style="width:150px;">hello <b>Javascript</b></div>
<div id="div5" style="width:150px;">hello</div>
<div id="div6" style="width:150px;">hello</div>
<div id="div7" style="width:150px;">hello</div>
<div id="div8" style="width:150px;">hello</div>
<div id="div9" style="width:150px;">hello</div>
<div id="div10" style="width:150px;">hello</div>
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
动态更新网页是前端开发很重要的一环,它涉及各种各样的需求.
但是核心的只有一个就是如何去动态更新dom.
动态更新dom,会造成浏览器的重排和重绘,这是造成浏览器显示效果不佳的重要因素.
所以什么时候更新,更新那一部分dom就显得由于重要了.
这里有一个最大的原则,满足需求的情况下更新的次数越少越好.
*/
/*
innerHTML是常用的一个属性,用来更新或获取目标元素之间的html.
*/
//获取mydiv中的html
var div = document.getElementById("mydiv");
//通过dom的innerHTML属性就可以了,注意大小写哦.
var html = div.innerHTML;
console.log(html);//hello <b>Javascript</b>
//更新mydiv中html
var div = document.getElementById("mydiv");
var html = "<span style='color:red;' >hello</span><b><i>Javascript</i></b>";
//改变mydiv之间的dom结构
div.innerHTML = html;
/*
有一些情况,我们需要连目标元素本身的html也需要得到或者更新.
可以使用outerHTML来获取或者更新.
*/
//获取mydiv2 html
var div2 = document.getElementById("mydiv2");
var html = div2.outerHTML;
//比起innerHTML,outerHTML连外层的div也返回了,这就是两个属性之间的区别.
console.log(html);//<div id="mydiv2" style="width:150px;">hello <b>Javascript</b></div>
//更新mydiv2 html
var div2 = document.getElementById("mydiv2");
var html = "<p><span>hello</span><b><i>Javascript</i></b></p>";
//这样就把整个div2都更新了,如果我们在获取div2的dom是获取不到的.
div2.outerHTML = html;
/*
跟innerHTML和outerHTML对应的属性还有innerText和outerText.
用来获取或更新目标元素的文本内容.
*/
//获取mydiv的文本内容
var div = document.getElementById("mydiv");
var text = div.innerText;
//返回的是div之间所有的文本内容
console.log(text);//helloJavascript
//更新mydiv中文本内容
var div = document.getElementById("mydiv");
var text = "hello world";
//改变mydiv之间的文本
div.innerText = text;
/*
发现div之间的其它html标签都没有了,这就是这个属性的弊端,它会覆盖元素之间的其它元素.
并且,这个属性FF(火狐)浏览器还不支持,所以更多时候建议大家使用innerHTML属性.
但是我们很多时候确实只需要获取文本数据,并不需要html元素标签,怎么办呢?
发现js提供了一个replace()的方法,可以替换匹配的字符串,只需要把这些html标签全部替换掉就行了.
*/
/*
replace(str/reg,str)方法可以在字符串中替换匹配的字符换,或替换与正则表达式匹配的字符串.
*/
/*
那如何来替换所有的html标签呢?
分析一下html标签有哪些特点:
1.元素标签都是以"<"开头,已">"结尾,并且结束标签还有一个"/".
2.html文档中会有很多空格需要删除.
3.html文档中还有一些特殊的标签,比如空格 .
*/
//匹配元素tag正则,以<开始,/出现0或1次,中间是N次非>字符,已>结束.
var tagReg = /<\/?[^>]*>/g;
//匹配空格正则,\s 元字符用于查找空白字符.包含空格符,制表符,回车符,换行符,垂直换行符,换页符.
var spaceReg = /\s+/g;
//匹配 特殊标签,注意需要加";",就算你文档中没写,在文档解析的时候浏览器也会自动补全,这是语法.
var otherReg = / /ig;
var div = document.getElementById("mydiv3");
var html = div.innerHTML;
//先替换全部tag标签
var str = html.replace(tagReg,"");
console.log(str);
/*
H T M L
空 格替换
*/
//然后替换所有空白字符
var str = str.replace(spaceReg,"");
console.log(str);//HTML空 格替换
var str = str.replace(otherReg,"");
//替换特殊标签
console.log(str);//HTML空格替换
/*
使用按单例模式封装一下.
*/
var stringFormat = function(){
//匹配元素tag正则,以<开始,/出现0或1次,中间是N次非>字符,已>结束.
var tagReg = /<\/?[^>]*>/g;
//匹配空格正则,\s 元字符用于查找空白字符.包含空格符,制表符,回车符,换行符,垂直换行符,换页符.
var spaceReg = /\s+/g;
//匹配 特殊标签,注意需要加";",就算你文档中没写,在文档解析的时候浏览器也会自动补全,这是语法.
var otherReg = / /ig;
/*
替换指定字符串中的html字符
str:需要替换的字符串
*/
function replaceHtml(str){
if(str != null && str != ""){
str = str.replace(tagReg,"");
str = str.replace(spaceReg,"");
str = str.replace(otherReg,"");
}
return str;
}
return{
replaceHtml:replaceHtml
}
}();
//测试一下
var div = document.getElementById("mydiv3");
var html = div.innerHTML;
var str = stringFormat.replaceHtml(html);
console.log(str);//HTML空格替换
/*
insertAdjacentHTML,在目标元素指定位置添加元素.
这个方法比起innerHTML,要更加灵活,更加好用.
*/
/*
语法:
insertAdjacentHTML(where,str)
参数：
where:指定添加html标签语句的地方,有四种选择:
1.beforeBegin:添加到目标元素开始前
2.afterBegin:添加到目标元素开始标记之后
3.beforeEnd:添加到目标元素结束标记前
4.afterEnd:添加到目标元素结束标记后
*/
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var html = "<span style='color:red;'>insert</span>";
div1.insertAdjacentHTML("beforeBegin",html);
//<span style="color:red;">insert</span><div id="div1" style="width:150px;">hello <b>Javascript</b></div>
div2.insertAdjacentHTML("afterBegin",html);
//<div id="div2" style="width:150px;"><span style="color:red;">insert</span>hello <b>Javascript</b></div>
div3.insertAdjacentHTML("beforeEnd",html);
//<div id="div3" style="width:150px;">hello <b>Javascript</b><span style="color:red;">insert</span></div>
div4.insertAdjacentHTML("afterEnd",html);
//<div id="div4" style="width:150px;">hello <b>Javascript</b></div><span style="color:red;">insert</span>
/*
jquery时间
*/
//html(),获取/更新目标元素dom
var div = $("#div5").html();
console.log(div);//hello
var str = "<b><i>jquery</i></b>";
$("#div5").html(str);//<b><i>jquery</i></b>
//append(str),往目标元素结束标记前追加dom,跟html()的区别是,append()不会删除原来以后的dom结构.
var div = $("#div6");
var str = "<b><i>jquery</i></b>";
div.append(str);//<div id="div6" style="width:150px;">hello<b><i>jquery</i></b></div>
//prepend(str),往目标元素开始标记后追加dom,跟append()的区别是,append()往后加,prepend()往前加.
var div = $("#div7");
var str = "<b><i>jquery</i></b>";
div.prepend(str);//<div id="div7" style="width:150px;"><b><i>jquery</i></b>hello</div>
//after(str),往目标元素结束标记后追加dom,跟append()的区别是,append()在结束标签前,after()在结束标签后.
var div = $("#div8");
var str = "<b><i>jquery</i></b>";
div.after(str);//<div id="div7" style="width:150px;">hello</div><b><i>jquery</i></b>
//before(str),往目标元素开始标记前追加dom,跟prepend()的区别是,prepend()在开始标签之后,before()在开始标签之前.
var div = $("#div9");
var str = "<b><i>jquery</i></b>";
div.before(str);//<b><i>jquery</i></b><div id="div7" style="width:150px;">hello</div>
//wrap(str),给目标元素添加一个父节点.
var div = $("#div10");
var str = "<b></b>";
div.wrap(str);//<b><div id="div10" style="width:150px;">hello</div></b>
/*
知识点:
1.动态更新dom的几种方法,innerHTML,innerText,insertAdjacentHTML等.
2.如何通过正则表达式格式化字符串.
3.单例模式封装.
4.jquery常用更新dom的方法介绍.
*/
</script>
相关推荐
### HTML5详细介绍 #### 1、HTML5概述 HTML5是一种新的网络标准，旨在替代HTML4.0、XHTML1.0以及DOM Level 2 HTML等旧标准。它的诞生标志着Web开发进入了新时代。 - **发展目标**：HTML5的目标是简化Web开发流程...
另一方面，"表演团队组合介绍页面html5网页模板"暗示模板可能特别关注于艺术或娱乐行业的团队，拥有吸引眼球的设计元素，如动态效果、多媒体内容支持，以及适应现代网页设计趋势的HTML5特性。 HTML5是HTML的最新...
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
【标题】：“基于HTML5的Web前端设计（旅游景点介绍）” HTML5是现代Web开发的核心，它在传统的HTML4基础上引入了许多新特性，增强了网页的交互性和动态性。在这个项目中，我们主要关注如何利用HTML5进行网页设计，...
《程序猿炫酷个人介绍HTML源码》是一个专为程序员设计的、用于展示个人技能和经验的网页模板。这个源码充分利用了HTML5的新特性，结合CSS3的动画效果，打造出一个充满科技感且交互性强的个人简历页面。在Web开发领域...
"html5全屏电影人物介绍图片幻灯片动画特效"是一个利用HTML5特性来设计的项目，旨在为电影人物提供一种引人入胜的展示方式。这个项目可能包括了CSS3、JavaScript以及可能的框架如jQuery或Vue.js等，以实现丰富的动画...
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
这个名为"html+js+css自我介绍"的项目，显然利用这三种语言创建了一个动态的个人简历展示页面，其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
一个关于入门级别的Html5的简单认识 欢迎大家来观看
随着时间的推移，HTML不断发展，如今已更新至HTML5版本，这个版本极大地增强了对多媒体内容的支持，并提供了更好的结构化元素，提高了网页的可访问性和可用性。 **HTML的基本结构**： HTML文档通常以`<!DOCTYPE>`...
HTML5全屏滚动大学学校介绍专题页模板是一个适用于移动端的网页设计资源，它结合了现代Web技术，如HTML5，来创建引人入胜的视觉效果和流畅的用户体验。这个模板特别适合大学或学校用于宣传活动、展示学校风貌或介绍...
【企业介绍单页HTML模板】是一种专为展示企业信息而设计的网页模板，它基于流行的前端框架Bootstrap构建，提供了一种高效、快捷的方式来创建专业且吸引人的企业官方网站。Bootstrap是Twitter开发的一个开源工具，...
3D 足球队队员介绍，这个是采用CSS3技术实现的效果，HTML5 CSS3三维效果，使用本实例中的效果，使用了googleapis，还自定义了超多的JS类库，以足球场为核心，显示各队员头像，单击头像可显示该运动员信息，并以前峰...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本，去除了短信注册接收验证码（当然也可以加），充值对接了Z支付个人...
- **开发环境搭建**：介绍如何设置一个适合HTML5开发的环境，包括文本编辑器的选择、浏览器兼容性测试工具等。 - **基础知识回顾**：对HTML基本语法、CSS样式以及JavaScript基础进行简要复习，为后续深入学习打下...
"HTML5咕咚手机官网介绍页面模板"是一个专为咕咚手机官网设计的页面模板，旨在为用户提供一个直观、美观且功能丰富的展示平台。这个模板采用HTML5语言编写，充分利用了其强大的新特性，如语义化标签、媒体元素、离线...