JavaScript利用DOM给页面添加内容

自定义一个log函数,输出传入函数的对象或者信息.

Log.js
// JScript source code

function
 log(category, message, object) {
    // If this category is explicitly disabled, do nothing

    if
 (log.options[category + "Disabled
"]) return
;

    // Find the container

    var
 id = category + "_log
";
    var
 c = document
.getElementById(id);

    // If there is no container, but logging in this category is enabled,

    // create the container.

    if
 (!c && log.options[category + "Enabled
"]) {
        c = document
.createElement("div
");
        c.id = id;
        c.className = "log
";
        document
.body.appendChild(c);
    }

    // If still no container, we ignore the message

    if
 (!c) return
;

    // If timestamping is enabled, add the timestamp

    if
 (log.options.timestamp)
        message = new
 Date
() + ": 
" + (message ? message : "");

    // Create a 
  
  

   
    element to hold the log entry
    
   
   var
 entry = 
   
   document
.createElement("
   
   div
");
    entry.className = category + "
   
   _message
";

    
   
   if
 (message) {
        
   
   // Add the message to it

        entry.appendChild(
   
   document
.createTextNode(message));
    }

    
   
   if
 (object && 
   
   typeof
 object == "
   
   object
") {
        entry.appendChild(log.makeTable(object, 0));
    }

    
   
   // Finally, add the entry to the logging container

    c.appendChild(entry);
}


   
   // Create a table to display the properties of the specified object

log.makeTable = 
   
   function
(object, level) {
    
   
   // If we've reached maximum recursion, return a Text node instead.

    
   
   if
 (level > log.options.maxRecursion)
        
   
   return
 
   
   document
.createTextNode(object.
   
   toString
());

    
   
   // Create the table we'll be returning

    
   
   var
 table = 
   
   document
.createElement("
   
   table
");
    table.border = 1;

    
   
   // Add a Name|Type|Value header to the table

    
   
   var
 header = 
   
   document
.createElement("
   
   tr
");
    
   
   var
 headerName = 
   
   document
.createElement("
   
   th
");
    
   
   var
 headerType = 
   
   document
.createElement("
   
   th
");
    
   
   var
 headerValue = 
   
   document
.createElement("
   
   th
");
    headerName.appendChild(
   
   document
.createTextNode("
   
   Name
"));
    headerType.appendChild(
   
   document
.createTextNode("
   
   Type
"));
    headerValue.appendChild(
   
   document
.createTextNode("
   
   Value
"));
    header.appendChild(headerName);
    header.appendChild(headerType);
    header.appendChild(headerValue);
    table.appendChild(header);

    
   
   // Get property names of the object and sort them alphabetically

    
   
   var
 names = [];
    
   
   for
 (
   
   var
 
   
   name
 
   
   in
 object) names.push(
   
   name
);
    names.sort();

    
   
   // Now loop through those properties

    
   
   for
 (
   
   var
 i = 0; i < names.
   
   length
; i++) {
        
   
   var
 
   
   name
, value, type;
        
   
   name
 = names[i];
        
   
   try
 {
            value = object[
   
   name
];
            type = 
   
   typeof
 value;
        }
        
   
   catch
 (e) { 
   
   // This should not happen, but it can in Firefox

            value = "
   
   
";
            type = "
   
   unknown
";
        };

        
   
   // Skip this property if it is rejected by a filter

        
   
   if
 (log.options.filter && !log.options.filter(
   
   name
, value)) 
   
   continue
;

        
   
   // Never display function source code: it takes up too much room

        
   
   if
 (type == "
   
   function
") value = "
   
   {/*source code suppressed*/}
";

        
   
   // Create a table row to display property name, type and value

        
   
   var
 row = 
   
   document
.createElement("
   
   tr
");
        row.vAlign = "
   
   top
";
        
   
   var
 rowName = 
   
   document
.createElement("
   
   td
");
        
   
   var
 rowType = 
   
   document
.createElement("
   
   td
");
        
   
   var
 rowValue = 
   
   document
.createElement("
   
   td
");
        rowName.appendChild(
   
   document
.createTextNode(
   
   name
));
        rowType.appendChild(
   
   document
.createTextNode(type));

        
   
   // For objects, recurse to display them as tables

        
   
   if
 (type == "
   
   object
")
            rowValue.appendChild(log.makeTable(value, level + 1));
        
   
   else

            rowValue.appendChild(
   
   document
.createTextNode(value));
        
   
   // Add the cells to the row, and add the row to the table

        row.appendChild(rowName);
        row.appendChild(rowType);
        row.appendChild(rowValue);

        table.appendChild(row);
    }

    
   
   // Finally, return the table.

    
   
   return
 table;
}


   
   // Create an empty options object

log.options = {timestamp:
   
   true
};


   
   // Utility versions of the function with hardcoded categories

log.debug = 
   
   function
(message, object) { log("
   
   debug
", message, object); };
log.warn = 
   
   function
(message, object) { log("
   
   warning
", message, object); };


   
   // Uncomment the following line to convert alert() dialogs to log messages


   
   // function alert(msg) { log("alert", msg); }


  
  

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Log</title> <mce:script type="text/javascript" src="Log.js" mce_src="Log.js"></mce:script> <!-- include log() --> <link rel="stylesheet" type="text/css" href="log.css" mce_href="log.css" /> <!-- include styles --> </head> <body> <mce:script type="text/javascript"><!-- function makeRectangle(x, y, w, h) { // This is the function we want to debug log.debug("entering makeRectangle"); // Log a message var r = {x:x, y:y, size: { w:w, h:h }}; log.debug("New rectangle", r); // Log an object log.debug("exiting makeRectangle"); // Log another message return r; } // --></mce:script> <!-- this button invokes the function we want to debug --> <button οnclick="makeRectangle(1,2,3,4);">Make Rectangle</button> <!-- This is where our logging messages will be placed --> <!-- We enable logging by putting this <div> in the document --> <div id="debug_log"></div> </body> </html>

log.css
#debug_log { /* Styles for our debug message container */
    background-color: #aaa;    /* gray background */
    border: solid black 2px;   /* black border */
    overflow: auto;            /* scrollbars */
    width: 75%;                /* not as wide as full window */
    height: 300px;             /* don't take up too much vertical space */
}

#debug_log:before { /* Give our logging area a title */
    content: "Debugging Messages";
    display: block;
    text-align: center;
    font: bold 18pt sans-serif ;
}

.debug_message { /* Place a thin black line between debug messages */
    border-bottom: solid black 1px;
}

运行结果: