JavaScript利用DOM给页面添加内容

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

// 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 onclick="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>

#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;
}

运行结果: