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()重写问题的更多相关文章

  1. 关于document.write()重写页面

    今天碰到了一个以前没注意的问题即:document.write(),在此拿来分享! document.write是最基本的JavaScript命令之一,这个命令简单地打印指定的文本内容到页面上(注意是 ...

  2. 【前端安全】JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...

  3. javascript创建自定义对象和prototype

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【前端安全】JavaScript防http劫持与XSS (转)

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...

  5. Sizzle源码分析 (一)

    Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 19 ...

  6. C# html生成PDF遇到的问题,从iTextSharp到wkhtmltopdf

    我们的网站业务会生成一个报告,用网页展示出来,要有生成pdf并下载的功能,关键是生成pdf. 用内容一段段去拼pdf,想想就很崩溃,所以就去网上找直接把html生成pdf的方法. 网上资料大部分都是用 ...

  7. XML 解析---dom解析和sax解析

    眼下XML解析的方法主要用两种: 1.dom解析:(Document Object Model.即文档对象模型)是W3C组织推荐的解析XML的一种方式. 使用dom解析XML文档,该解析器会先把XML ...

  8. CSS SandBox

    引言 本篇文章主要介绍的是关于CSS Sandbox的一些事情,为什么要介绍这个呢?在我们日常的开发中,样式问题其实一直是一个比较耗时的事情,一方面我们根据 UI 稿不断的去调整,另一方面随着项目越来 ...

  9. document.getElementsByClassName方法的重写(OVERRIDE)

    众所周知,对于IE8以下的浏览器(IE8居然是WIN7预装的)没有document.getElementsByClassName,网上也有很多重写的方法,以下是本人在项目中所使用的方法 documen ...

随机推荐

  1. fiddler使用——配置抓取https,出现提示“禁用解密”“单击配置”

    自己在设置fiddler抓https的时候,浏览器总是提示:此证书不受信任:中午没午睡下午一直昏沉沉的,弄了好久,终于想起来是证书的问题:度娘有个不错的答案,这里分享一下!给以后有相同问题的朋友,也同 ...

  2. JS 只创建一个元素

    //判断有没有这个元素<div id="div"> if(my$("div").firstElementChild){ console.log(&q ...

  3. 极限编程(xp),iso国际标准化组织

    极限编程(xp):eXtreme Programming 极限编程-XP 四个价值:沟通 communication.简化 similicity.反馈 feedback.勇气 courage http ...

  4. CentOS7 配置 nginx php php-fpm

    上一篇说到安装 php 装完并没有任何设置,这篇记录一下设置.先设置 nginx 吧,nginx 网上多如繁星的设置但大都比较简单,属于基础设置,因此此处只贴出设置后的结果,用红色框表示一些自己改动或 ...

  5. 洛谷 P3695 CYaRon!语 题解 【模拟】【字符串】

    大模拟好啊! 万一远古计算机让我写个解释器还真是得爆零了呢. 题目背景 「千歌です」(我是千歌).「曜です」(我是曜).「ルビィです」(我是露比).「3人合わせて.We are CYaRon! よろし ...

  6. SGU - 275 线性基 初步

    题意:求给出的数任意异或的最大值 目前对线性基的理解过于肤浅,有空总结一下 #include<iostream> #include<algorithm> #include< ...

  7. BZOJ - 2457 思維+貪心

    //為什麼我的Chrome OS更新後變成強制繁體了?? 題目要求使用最少的雙端隊列來維護一個單調非降序列 先來看下規律 首先,val肯定是單調非降的,在相等val範圍內的id可以xjb亂放不影響 其 ...

  8. [转] open-falcon编写的整个脑洞历程

    [From] https://mp.weixin.qq.com/s?__biz=MjM5OTcxMzE0MQ==&mid=400225178&idx=1&sn=c98609a9 ...

  9. npm install 卡住的时候的处理

    [From] http://www.eguidedog.net/doc/what-to-do-when-npm-install-hangs.php 翻译一下,npm install 经常卡在下载某个包 ...

  10. linux 第八章 高级键盘

    1.clear:清屏 2.history:显示历史命令列表 3.Ctrl+A:移动光标到行首 4.Ctrl+E:移动光标到行尾 5.Ctrl+F:光标向前移动一个字符 6.Ctrl+B:光标向h后移动 ...