document.write()重写问题
document.write(); 可用于重写给某个元素追加内容;
当document.write(); 用于JS文件中,会重写整个页面,解决这个问题有多种方法。
重写原因:当onload的时候执行 ,文档流已经关闭 ,write会重新打开文档流,所以覆盖了。
1.jquery追加。这是最简单的一种方法,直接用jquery的append等方法给元素追加内容。
  一、在元素内部/外部追加元素 
    append,prepend:添加到子元素 
    before,after:作为兄弟元素添加
html:
<div id="content">
<p>在我的后面追加一条新闻</p>
</div> Javascript:
<script type="text/javascript">
jQuery(function(){
//在元素内部追加内容
$("#content").append("<p>姚明退役了...</p>");
})
</script>
在#content里面添加元素,这是把<p>姚明退役了...</p>作为子元素添加到#content,如果想在元素外部追加元素,需要用到after,这样的话就可以把<p>姚明退役了...</p>作为兄弟元素追加到#content后面 
复制代码 代码如下:
<script type="text/javascript">
jQuery(function(){
//将span添加到追加到content1的后面
$("#content").after("<p>姚明退役了...</p>");
})
</script>
二、在元素的不同位置追加内容
html <div id="content1" style="border:1px solid red">
<p>窗前明月光</p>
</div>
<span>疑是地上霜</span> javascript <script type="text/javascript">
jQuery(function(){
//将span添加到追加到content1的后面
$("span").appendTo("#content1");
})
</script>
三、在元素的开始位置追加内容
html <div>
<div id="content">
<p>在我的后面追加一条新闻</p>
</div> javascript <script type="text/javascript">
jQuery(function(){
//在元素的开始位置追加内容
$("#content").prepend("<p>头部</p>");
})
</script>
四、在不同元素的开始位置追加内容
html <div id="content">
<p>在我的后面追加一条新闻</p>
</div>
<span>疑是地上霜</span> javascript <script type="text/javascript">
jQuery(function(){
//在不同元素的开始位置追加内容
$("span").prependTo("#content");
})
</script>
在#content里面添加元素,这是把<span>疑是地上霜</span>作为子元素添加到#content开始地方,如果想在元素外部添加开始元素,需要用到before,这样的话就可以把<span>疑是地上霜</span>作为兄弟元素追加到#content开始了 
复制代码 代码如下:
<script type="text/javascript">
jQuery(function(){
//在不同元素的开始位置追加内容
$("span").before("#content");
})
</script>
五、用指定结构的元素包含元素 
Warp(html) 
在指定的html中指定html元素,但指定的元素中不可含有兄弟元素,否则不能正常的运行,并且不含有一般文本字符串,下面的代码用div标签包含p标签
html <form id="form1" runat="server">
<span>将我包含在div中</span>
</form> javascript <script type="text/javascript">
jQuery(function(){
$("span").wrap("<b></b>");
})
</script>
六、用指定的元素包含多个html元素 
warpAll(html)
html <form id="form1" runat="server">
<p>p内容</p>
<p>p内容</p>
<p>p内容</p>
<p>p内容</p>
<p>p内容</p>
</form> javascript <script type="text/javascript">
jQuery(function(){
$("p").wrapAll("<div style='border:1px solid red'><p></p></div>");
})
</script>
七、用指定的标签包含子元素 
wrapInner(html) 
与warp方法一样,在html中指定html元素,例如: 
用b标签包含p标签中文字的代码如下:
html代码
<p>将p标签的文字用b标签包含起来</p>
<p>也将p标签的文字用b标签包含起来</p> javascript
<script type="text/javascript">
jQuery(function(){
$("p").wrapInner("<b></b>");
})
</script>
2.在jquery中使用:document.getElementById("emb").innerHTML=a;
链接地址:http://www.jb51.net/article/35845.htm
document.write()重写问题的更多相关文章
- 关于document.write()重写页面
		
今天碰到了一个以前没注意的问题即:document.write(),在此拿来分享! document.write是最基本的JavaScript命令之一,这个命令简单地打印指定的文本内容到页面上(注意是 ...
 - 【前端安全】JavaScript防http劫持与XSS
		
作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...
 - javascript创建自定义对象和prototype
		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
 - 【前端安全】JavaScript防http劫持与XSS (转)
		
作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...
 - Sizzle源码分析  (一)
		
Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 19 ...
 - C# html生成PDF遇到的问题,从iTextSharp到wkhtmltopdf
		
我们的网站业务会生成一个报告,用网页展示出来,要有生成pdf并下载的功能,关键是生成pdf. 用内容一段段去拼pdf,想想就很崩溃,所以就去网上找直接把html生成pdf的方法. 网上资料大部分都是用 ...
 - XML 解析---dom解析和sax解析
		
眼下XML解析的方法主要用两种: 1.dom解析:(Document Object Model.即文档对象模型)是W3C组织推荐的解析XML的一种方式. 使用dom解析XML文档,该解析器会先把XML ...
 - CSS SandBox
		
引言 本篇文章主要介绍的是关于CSS Sandbox的一些事情,为什么要介绍这个呢?在我们日常的开发中,样式问题其实一直是一个比较耗时的事情,一方面我们根据 UI 稿不断的去调整,另一方面随着项目越来 ...
 - document.getElementsByClassName方法的重写(OVERRIDE)
		
众所周知,对于IE8以下的浏览器(IE8居然是WIN7预装的)没有document.getElementsByClassName,网上也有很多重写的方法,以下是本人在项目中所使用的方法 documen ...
 
随机推荐
- [Swift实际操作]九、完整实例-(2)在Xcode 10中创建新项目
			
本文将在Xcode中创建上一文<在iTunesConnect网站中创建产品>在iTunes Connect创建的产品具有相同的Bundle ID的应用程序. 在项目模板窗口中,选择单视图模 ...
 - P4855 MloVtry的idea
			
$ \color{#0066ff}{ 题目描述 }$ MloVtry是一个脑洞很大的人,它总会想出一些奇奇怪怪的idea. 可问题是,MloVtry作为一个蒟蒻,很多时候都没办法解决自己提出的问题,所 ...
 - 如何在UITableViewController上添加一个固定的视图
			
最近在使用UITableViewController,想在上面添加一个固定的视图,不随ScrollView滑动而移动.最后找到2种解决办法,一种是计算TableView的偏移,调整视图的位置,不断更新 ...
 - [SDOi2012]Longge的问题 BZOJ2705 数学
			
题目背景 SDOi2012 题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). ...
 - svn学习笔记(一)
			
一.svn介绍 1.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易 ...
 - Vuex 使用了 module 后的访问方法 ..
			
如果 使用了 module 和 namespace state 数据:=> this.$store.state.User.info (user 是模块名字. info 是 state 里 ...
 - pscp 命令---windows和linux之间互相拷贝文件的工具
			
pscp -r d:\cc root@10.0.0.8:/root/test copy d:\cc content recursively into the /root/test, contains ...
 - ES6问题记录--Promise
			
在读[阮一峰]的 ES6 入门文档的时候,有一段代码是这样的. 文章中,还有一段是这样写的 所以,Promise.resolve(3).finally(()=>{}),解析出来的resolve ...
 - 2018acm-icpc青岛站心得
			
今年总共两场区域赛,一场南京,一场青岛.南京场队伍真正开始磨合,虽然最后还是铜牌,但是和银牌队伍其实只差一个计算几何的板子的问题.而鉴于南京的教训,所以在准备青岛站的时候,我准备了非常多的模板,还和派 ...
 - Trie - 20181113
			
442. Implement Trie (Prefix Tree) class TrieNode { public boolean isWord; public TrieNode[] children ...