title: cordova windows phone 8.1 : innerHTML add extra html tags
body: <p>I use Visual Studio 2013 (Community) to create an app with Cordova 4.3.0.
  I target WP8.1 ("Windows Phone (Universal)" setting for the emulator).</p>
  
  <p>I created an application from the template "Blank App (Apache Cordova)" from VS2013.<br>
  Then, I added a simple code that modifying the DOM with <code>document.innerHTML</code> when the <code>deviceready</code> event is listened.</p>
  
  <pre><code>var elt = document.getElementById('test');
  elt.innerHTML = '&lt;p&gt;add a P in the DIV&lt;/p&gt;';
  </code></pre>
  
  <p>Before the update I have :  </p>
  
  <pre><code>&lt;div id="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And after javascript do the job :  </p>
  
  <pre><code>&lt;div id="test"&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;add a P in the DIV&lt;/p&gt;
    &lt;/body&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>&lt;p&gt;</code> is wrapped in <code>&lt;body&gt;</code> as if <code>&lt;div&gt;</code> were <code>&lt;html&gt;</code>  </p>
  
  <p>If I use Windows Phone 8 (not 8.1) emulator (or device) this does not happen.  </p>
  
  <p>I need to dynamically inject DOM elements but it is impossible with this bug. Use the <code>append()</code> or <code>prepend()</code> <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> merthods has the same bug.  </p>
  
  <p>How can I fix it ?</p>
  
  <hr>
  
  <p><em>edit:</em>
  If I use node manipulation the result is correct.</p>
  
  <pre><code>var para = document.createElement("p");
  var node = document.createTextNode("add a P in the DIV");
  para.appendChild(node);
  
  var element = document.getElementById("test");
  element.appendChild(para);
  </code></pre>
  
  <p>But creating an HTML structure more complex, it quickly becomes very verbose.</p>
  
  <p>No idea ?</p>
  
  <hr>
  
  <p>I've found another solution that is more pretty.</p>
  
  <pre><code>var elt = document.getElementById('test');
  elt.innerHTML = '';  // remove content works without head/body insertion
  elt.insertAdjacentHTML('beforeend', '&lt;p&gt;add a P in the DIV&lt;/p&gt;');
  </code></pre>