title: how to dynamically add stylesheet and javascript files to a div element using jquery
body: <p>I am displaying json data to a dynamically generated div element to which I want to add stylesheet and javascript files.</p>
  
  <p>Styling and javascript functionality to the json data are applied by many different <code>.css</code> and <code>.js</code> files so I want to add those files to the div element being used to the json data.</p>
  
  <p>If I add these files to the jsp page itself where the <code>&lt;div&gt;</code> element has been added to display the json data the data does not get styled.</p>
  
  <p>Does jquery provide and methods to achieve the same?</p>
  
  <p>What I am trying to do is same as adding the following to a jsp/html page:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/resources/styles1.css" /&gt;" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/resources/styles2.css" /&gt;" /&gt;
  
  &lt;script type="text/javascript" src="&lt;c:url value="/resources/script1.js" /&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;c:url value="/resources/script2.js" /&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><strong>billboard.jsp</strong></p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/resources/default.css" /&gt;" /&gt;
  
      &lt;script type="text/javascript" src="&lt;c:url value="/resources/js/jquery-1.5.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="&lt;c:url value="/resources/js/billboard.findDataById.js" /&gt;"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/resources/styles1.css" /&gt;" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/resources/styles2.css" /&gt;" /&gt;
  
      &lt;script type="text/javascript" src="&lt;c:url value="/resources/script1.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="&lt;c:url value="/resources/script2.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
           highlighter.all();
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="billboard"&gt;        
          &lt;input id="id" type="text" name="id"&gt;&lt;/input&gt;
          &lt;input type="button" onclick="findDataById()" value="find"&gt;&lt;/input&gt;     
      &lt;/div&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>billboard.findDataById.js</strong></p>
  
  <pre><code>function findDataById() {
      $.ajax({
          url:            "/domain/retrieveData",
          data:       "id=" + $("#id").val(),
          success:    function(data) {
                              $("#result").html(data.dataToBeDisplayedInsideDiv);
                          },
          async:      false,
          dataType:   "json"
      }); 
  }
  </code></pre>
  
  <p>When the data is added dynamically to the <code>&lt;div id="result"&gt;&lt;/div&gt;</code> I am getting the <code>&lt;div id="result"&gt;&lt;/div&gt;</code> styled with <code>&lt;script type="text/javascript" src="&lt;c:url value="/resources/js/jquery-1.5.js" /&gt;"&gt;&lt;/script&gt;</code> but not the other <code>.css</code> and <code>.js</code> files. </p>