Question

im using jQuery load() method to send another html to my webpage.
The html being loaded contains Javascript generated HTML.

Im using this function to load the html:

$(document).ready(function(){
    $("img#links").click(function(){
      $("div#content").load("links.html");
    });
  });

The links.html contains:

<h1 id="content">Links</h1>
<br>
<script>add_link("http://google.com");</script>

The add_link function generates me a table:

var add_link = function(link) {
  document.write("<table border=\"0\" width=\"100%\" height=\"50\" id=\"link\">");
  document.write("<tr>");
  document.write("<td width=\"50\"><img src=\"img/star.png\" /></td>");
  document.write("<td><a href=\"" + link + "\"><div class=\"link\">" + link + "</div></a></td></tr></table>");
}

However, when called instead of writing that js generated code into the webpage, it gets written to a blank page, containing only the table generated by JS.

Answer 1

When you call document.write() after the page loading has completed — definitely the case here — the browser will wipe out the original page. In other words, the browser interprets a call after the page is done to be an implicit request to “start over” with a blank page.

Instead of using document.write(), then, you can use DOM APIs to append new content to the page.