likely more of a beginner type question but. If I use the following code on a page it works fine, and displays what I need ( Listview from jquery )

```
<ul data-role="listview"  data-split-theme="a" data-inset="true">
    <li><a href="#">
        <img src="alarmcritical.png" width=25px;>
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmminor.png" width=25px;>
            <h2>Warning</h2>
            <p>Hot Chip</p>
        </a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmmajor.png" width=25px;>
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p>
        </a>
    </li>
</ul>

```

However, I am updating one section of a page by using 

```
document.getElementById('insertHere').innerHTML = stringData;

```

stringData being one long line of the html above...and I've copy pasted that as one line to ensure it does work ( outside of the innerhtml ).

So I have a span for inserthere, and was hoping to have the same effect as if I just typed the html out itself. But everytime it comes out broken ( not formatted as a listview ). Is this a common problem, or am I overlooking something?

Thanks

Edit: Updating with Javascript - Be gentle, rather new to it and am using a lot of example source code

```
$(document).ready(function () {

$('#tags').on('autocompleteselect', function (e, ui) {

   //check array for company name that was entered
    for(var i = 0; i < cases.length;i++){
    if(ui.item.value == cases[i].companyName)
    index = cases[i].id;
    }
    var company = "";

    //set the company name to match the one the customer selected
    company = cases[index].companyName;

    //display on page the cases for the customer selected

    var stringData = '<ul data-role="listview"  data-split-theme="a" data-inset="true"><li><a     href="#">    <img src="alarmcritical.png" width=25px;>    <h2>Broken Bells</h2>    <p>Broken Bells</p></a></li><br><li><a href="#">    <img src="alarmminor.png" width=25px;>    <h2>Warning</h2>    <p>Hot Chip</p></a></li><br><li><a href="#">    <img src="alarmmajor.png" width=25px;>    <h2>Wolfgang Amadeus Phoenix</h2>    <p>Phoenix</p></a></li>';

    document.getElementById('insertHere').innerHTML = stringData;

    //hide keyboard after user is done selecting
    //source code found at http://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript
    hideKeyboard($('input'));
      function hideKeyboard(element) {
            element.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
            element.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
            setTimeout(function() {
                element.blur();  //actually close the keyboard
                // Remove readonly attribute after keyboard is hidden.
                element.removeAttr('readonly');
                element.removeAttr('disabled');
                }, 100);
        }

    $(function() {
        $( "#selectable" ).selectable({
        stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      result.append( " #" + ( index + 1 ) );

      //set a brief timeout between the actual click of the case and when it displays
      setTimeout(func, 500);
      //display the case details
        function func() {
        document.getElementById('insertHere').innerHTML = '<div class="shadow"><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td height=10%><h2>' + company + '</h2></td></tr><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=ic_priority.png>Priority Status</td>&nbsp;&nbsp;<td><img src=ic_escalation.png>Escalation</td></tr></table><br><table id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=\"ic_agent.png\" valign=bottom>&nbsp<button data-theme="a"><img src=ic_action_call.png></button><button><img src=\"ic_action_chat.png\"></button</td></tr><tr><td>Case: ' + customerCases[index].caseNumber + ' </td></tr><tr><td>Status: Open</td></tr><tr><td>Updated: 8 May 2014 15:09:46</td></tr><tr><td>Contact: Bob Kingston</td></tr><td>Agent: ' + customerCases[index].contactName + '</td><tr><td>State: Offline</td></tr><tr><td><br></td></tr><tr><td>Issue:</td></tr><tr><td>&nbsp;&nbsp;&nbsp;' + customerCases[index].problem  + '</td></tr></table></div>';
        }
        });
      }
    });
  });

});

```

});

$("input[name=companyName]").autocomplete({
 source: cases
 }).data("autocomplete").\_renderItem = function(ul, item) {
 return $("- ").data("item.autocomplete", item).append("" + item.url + "").appendTo(ul);
 };

```
//$('div').addClass('shadow');

</script>

```

All the above is in the head.
What I'm doing is having a autocomplete bring up some information from a local array. So when you first search it brings up something, then after you select one it brings up a page with the selected information. All going into "inserthere". But I cannot seem to get it to work properly when I use the innerHTML with the stringData I wrote.