innerHTML set using Javascript is not visible on View Page Source

Posted on 2007-10-09
Last Modified: 2008-01-09
I am generating dynamic pages on my site using innerHTML (see example below).

<script type="text/javascript">

function load() {
      document.getElementById("content").innerHTML="New Content";


<body onload="load();">
<div id="content">Old content</div>

When I do a "View-Page Source" on the browser (both IE and Firefox), I was expecting to see:
<div id="content">New Content</div>
but instead I see:
<div id="content">Old Content</div>

The Page on the browser, though, display "New Content" correctly. Only the View-PageSource is the problem. Any idea on how to do this so that the "View-PageSource" shows the changed content?

The reason, I ask is because I am expecting Search Engine bots to visit the dynamic pages and if the content that gets displayed to the bots is not the "new content" then my dynamic pages are useless.

Any other way of doing this would also be appreciated.
Question by:unmeshm
    LVL 44

    Assisted Solution

    I think the simple answer to this is no.

    What you see when you view source is the initial page that is sent by the web server to the client when the page is requested. In other words the relevant markup that renders the first view of the page.

    At that point your javascript and anything else takes over (including user-interaction - would you want the page source to show the password just entered into an input element etc) and the page source is not changed.

    LVL 1

    Assisted Solution

    The reason why you are seeing that is because when the page is rendered the <div id="content">Old Content</div> is placed, then when the body is loaded the browser detects that the function load() should be called and does that which replaces the innerHTML of your DIV using the DOM.
    LVL 48

    Assisted Solution

    Dumb question: why don't you just render/output the new content in the content-div and replace the old content directly. Only so Search engines will index you page correctly (search engines don't evaluate Javascript).
    LVL 75

    Accepted Solution

    Yeah, why do you not tell us what you REALLY are doing so we can give better advice?

    Author Comment

    Thanks folks. I guess I will have to rewrite to have the content be generated on the Service side instead of using Javascript. Its an AJAX site hence the heavy reliance on innerHTML. But if the bots are not going to see the dynamic content - javascript is out. Will wait for a few more hours before disbursing the points.

    Author Comment

    mplungian: here is an example URL from my site:

    As you can see, when this URL is opened, other neighborhood places show up on the sidebar and they have embedded links in them that I wanted the bot to visit and index. I am filling up the sidebar using Javascript (setting innerHTML). I will look into setting this on the server side.
    LVL 75

    Expert Comment

    by:Michel Plungjan

    Yes if you do not want to gamble that google follows ajax data, you can put the links in a nice table in a <noscript></noscript> tag

    I seem to have read something about the danger of sniffing the bot and serve google prechewed pages...

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    758 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

    9 Experts available now in Live!

    Get 1:1 Help Now