<!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. react 学习笔记

    1.Router 1.1 Histories React Router 是建立在 history 之上的.一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 loca ...

  2. angularJS 学习之路

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body ...

  3. led灯的翻转函数

    定义: uint8_t led1_val; void LED1(uint8_t* val){ *val =!(*val); if( *val == 0x00 ) HAL_GPIO_WritePin ( ...

  4. spring-boot启动信息中non-fatal error

    java.lang.ClassNotFoundException: org.springframework.data.web.config.EnableSpringDataWebSupport缺少依赖 ...

  5. 用流来读取文件（getline，istringstream）

    ifstream infile("fileanme"); 原型:getline(istream &infile, string &line); 函数说明:读取文件中 ...

  6. windows使用python3.4生成二维码

    1.首先下载qrcode库 使用pip命令: pip install qrcode python3.x以上的版本默认是安装好pip的,如果出现无法找到pip指令的信息的话,则需要首先安装pip. 2. ...

  7. Java中值传递和引用传递的概念

    很多书中都提到了在Java中只存在值传递,但是今天在一个NanoHTTPD的源码中看到这样一段: if (qmi >= 0) { decodeParms(uri.substring(qmi + ...

  8. 张艾迪（创始人）：Be.Time+Cr.Idear的创新理念

    The World No.1 Girl :Eidyzhang The World No.1 Internet Girl :Eidyzhang AOOOiA.global Founder :Eidyzh ...

  9. ThinkPHP 3.2.3（一）基础

    一.安装 ThinkPHP无需任何安装,直接拷贝到你的电脑或者服务器的WEB运行目录下面即可. 如:我使用的是XAMPP集成环境,将框架解压缩到htdocs目录下即可.   二.目录结构 1.初始目录 ...

  10. python【0】-目录

    python[1]-基础知识 Python[2]-列表和元组 Python[3]-字典dic和集合set python[4]-函数 python[5]-生成式,生成器 python[6]-函数式编程 ...