<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>每天一点js， js 操纵dom </title>

   <script>

    //document 中的知道区域输出调试信息

    //如果 这个区域不存在则创建一个

   function debug(msg) {

     var log = document.getElementById('debuglog');

      if  (!log) {

          log = document.createElement("div");//创建一个div

          log.id = 'debuglog';//给这个元素的html id 赋值

          document.body.appendChild(log);//将这个元素添加到文档末尾

           /*

          var pre = document.createElement("pre");//创建一个pre元素

          var text = document.createTextNode(msg);//创建一个文本节点

          pre.appendChild(text);//添加到 pre 中

          log.appendChild(pre);//添加到 div 中

          **/

          log.innerHTML  = "<pre>"+msg+"</pre>"

      }

   }

   </script>

 </head>

 <body>

    <input type="button" value=" 点此" onclick="debug('文档正在加载中,耐心等待....');">

 </body>

</html>

js权威指南中的例子自己敲了一遍。

js操作dom---创建一个域来输出调试信息的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  3. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  4. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  5. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  6. 使用log4Net输出调试信息

    在上一篇搭建服务器端的项目基础上,使用log4Net进行调试信息输出 http://www.cnblogs.com/fzxiaoyi/p/8439769.html 1.先分析下Photo 自带的服务器 ...

  7. C# Debug和Trace：输出调试信息

    在 C# 语言中允许在程序运行时输出程序的调试信息,类似于使用 Console.WriteLine 的方式向控制台输出信息.所谓调试信息是程序员在程序运行时需要获取的程序运行的过程,以便程序员更好地解 ...

  8. 使用OutputDebugString输出调试信息

    在编写控制台程序的时候我们经常会使用printf输出调试信息,使我们了解程序的状态,方便调试,但是当编写非控制台程序的时候这种方法就行不通了,那我们应该怎么办?上网查了一些方法,大致就如下几种 使用L ...

  9. shell输出调试信息

    [shell输出调试信息] 1.使用trap命令 trap命令用于捕获指定的信号并执行预定义的命令. 其基本的语法是: trap 'command' signal 其中signal是要捕获的信号,co ...

随机推荐

  1. iOS 开发之SVN提交问题解决

    1.Commit failed (details follow): '/Users/dev_lzz/Desktop/cjh_ios(16)/cjh/iamgge/iconfont_arrow@3x.p ...

  2. SQL函数之---DECODE函数

    Decode函数是oracle/SQL提供的特有函数计算方式,语法:DECODE(value,if1,then1,if2,then2,if3,then3,...else),通常我们在写语句的时候可能会 ...

  3. 【Fiddler】改写返回数据功能

    方法一:打断点 1.在手机上设置好代理后,随便进入一个APP:之后选择Rules->Automatic Breakpoints->After Responses,在返回值处打断点 2.重新 ...

  4. <input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"> 上传图片，手机调用相册和摄像头

    <input type="file" id="camera" multiple="multiple" capture="ca ...

  5. Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules

    解决方案: 找到如下文件 将"jst.web"的version改低一些

  6. Python 修饰符

    def hello(fn):    def wrapper():        print "hello"        fn()        print "goodb ...

  7. Ubuntu： ImportError: No module named xgboost

    ImportError: No module named xgboost 解决办法: git clone --recursive https://github.com/dmlc/xgboost cd ...

  8. Windows下配置nginx+php(wnmp)

      第一部分:准备工作.(系统:Windows 8.1) 1.首先是下载软件. NGINX-1.3.8官网下载:http://nginx.org/en/download.html PHP5.4.8版本 ...

  9. C#获取并写入ORACLE数据库中中英文字符集问题

    背景: 开发语言:C# 开发工具:VS2010 A方ORACLE数据库:中文字符集 B方ORACLE数据库:英文字符集 传递方式:webservice方式(取数据,并把取出的数据放到DataTable ...

  10. Linux安装node

    以Ubuntu为例 1.apt-get update 2.apt-get install python gcc make g++ 3.wget https://nodejs.org/dist/v4.3 ...