title: Dynamic page in phonegap using javascript
body: <p><img src="https://i.stack.imgur.com/tX2zO.png" alt="dynamic Page with multiple dynamic titles"></p>
  
  <p>in this page every thing is dynamic one can anyone help me or guide me?</p>
  
  <p>ineed it to be fully dynamic.</p>
  
  <p>if i call method changeMe(e) at successive it through some error </p>
  
  <blockquote>
    <p>E/Web Console(5341): Uncaught TypeError: Object # has no method 'insertAdjacentHTML' at file:///android_asset/www/subpage.html:29</p>
  </blockquote>
  
  <p>i already developed some part</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" /&gt;
  
      &lt;script&gt;
  
          function changeMe(e)
          {
               e.insertAdjacentHTML("beforeEnd","&lt;div id='inner'&gt;&lt;/div&gt;");
               addHeadings();
  
          }
  
          function addHeadings()
          {
               inner.insertAdjacentHTML("beforeEnd","&lt;h3&gt;Title1&lt;/h3&gt;");
               InitThumbs();
  
          }
          function InitThumbs()
          {
              inner.insertAdjacentHTML("beforeEnd","&lt;ul style='background-color:#ffccaa' id='images'&gt;&lt;/ul&gt;");
              changeLi();
  
          }
  
          function changeLi() 
          {
              for(i=0; i&lt;20;i++)
              {
                  images.insertAdjacentHTML("BeforeEnd","&lt;li&gt;&lt;a href='subpage.html'&gt; &lt;img width='30%' class='photo' src='images/img.png'&gt;adsad&lt;/a&gt;&lt;/li&gt; ");
              }
          }
  
  
  
      &lt;/script&gt;
  
      &lt;style&gt;
  
  
  
          html, body
          {
              margin: 0;
              padding: 0;
              border: 0;
              outline: 0;
              font-size: 100%;
              text-decoration: none;
  
          }
  
          ul
          {
              margin: 0;
              padding: 0;
              white-space: nowrap;
              width: 100%;
              overflow-x: auto;
          }
  
          li 
          {
              display: inline;
          }
  
          #content 
          {
              height:100%;
          }
  
  
          .title
          {
              height:10%;
              width="100%"
              border-bottom-color: #000;
              border-bottom-style: solid;
              border-bottom-width: 1%;                
          }
  
          .title .center img
          {
              height:100%;       
          }
  
          .title .left img
          {
              height:100%;   
          }
  
          .title .right img
          {
              height:100%;       
          }
  
          .title .center
          {
              height:100%;    
              width:50%;  
              float: left;       
          }
          .title .right
          {
              height:100%;    
              width:25%;  
              float: left;    
              margin:0 auto;
              overflow:hidden;   
          }
          .title .left
          {
              height:100%;
              width:25%;  
              float: left;    
              margin:0 auto;
              overflow:hidden;  
          }
  
          .outer
          {
              height:90%;             
          }
  
          a:link,
          a:visited 
          {
              color: #09f;
          }
  
          a:hover,
          a:focus,
          a:active 
          {
              color: #344;
          }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;div id="content"&gt;
  
          &lt;div class="title" align="center"&gt;
              &lt;span class="left"&gt;
                  &lt;img src="images/back.png" onclick="history.go(-1);return false;"/&gt;
              &lt;/span&gt;
              &lt;span class="center"&gt;
                  &lt;img src="images/title.gif"/&gt;
              &lt;/span&gt;
              &lt;span class="right"&gt;
                  &lt;img src="images/home.png" onclick="history.go(-(history.length - 1));"/&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="outer"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>