Print DOM object changes?

Posted on 2006-05-29
Last Modified: 2013-11-19
Hi all.

Is there an easy way to print the changes made to the dom? For instance, if i have a blank html page with a div tag and via javascript i manipulate that div tag and place an image within the div using createElement('img'), etc.  Is there any way to print it?  Currently, when I do a print preview, the page I'm viewing is completely blank.

Question by:sapientconceptions
    LVL 30

    Accepted Solution

    this works both on IE and FF

    <title>Author: Third Santor</title>
    function test(){
      var d = document.getElementById("mydiv");
      var i = document.createElement("IMG");
      i.src = "winxp.gif";
    <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onload="test();">
    <div id="mydiv"></div>

    Author Comment

    Thanks Third. You are correct in that it works in both browsers.  My tests however weren't for the img tag, but instead for background-image.  I was able to get the background image to appear for pritning in IE by turning on the option, however in firefox (even with the option enabled) the background doesn't appear.  

    Any advice on that?

    Author Comment

    Third, I figured out my problem.  In my stylesheet for the div, i had z-index set to -1.  Firefox ignores the layer if defined with -1, so removing that, the printing option works as expected. Thanks for your assistance.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now