0

Im using the following code to load the html file containing my templates into a div dynamically it is working fine in all the browsers except IE8 and lower

JS Function:

function loadHTML(url, callback) {
    $.ajax({
        url: url,
        success: function(res) {
            var div = document.createElement("div");
            div.setAttribute("id", "downloadIFrame");
            document.body.appendChild(div);
            document.getElementById("downloadIFrame").innerHTML = (res);            
            callback();
        }
    });
}

template.html:

<script type="text/html" id="tmpl1">
    <div>sdfsdf</div>
</script>

<script type="text/html" id="tmpl2">
    <div>dddd</div>
</script>
Sandeep
  • 2,041
  • 21
  • 34

1 Answers1

0

Since you're already using jQuery, why not do the following:

function loadHTML(url, callback) {
  $.get(url, function(res){
    $('<div>')
      .attr('id', 'downloadIFrame')
      // I add the element to the DOM **after**
      // setting the html to increase performance.
      // Manipulating elements already in the DOM
      // is computationally expensive
      .html(res)
      .appendTo('body')
    ;//div

    if(callback) callback();
  });
}
THEtheChad
  • 2,372
  • 1
  • 16
  • 20
  • have u tried executing that??? it doesnot work even in Chrome/Firefox atleast. Because script tags cannot be appended as html before u insert the `div` into dom. And regarding performance never ever use `$("
    ")` to create element instead use `document.createElement("div")`. Here is the performance test [jquery-vs-createelement](http://jsperf.com/jquery-vs-createelement)
     – Sandeep Jan 25 '13 at 07:38
  • Have you ever tested the performance for `$('
    ')`? It's extremely minimal. The jQuery library is simply running the `'
    '` string through a series of filters to determine what type of input it is. Once it's identified as an element, jQuery runs the exact command you just identified: `document.createElement('div')`. The only overhead is determining what data you passed in.
     – THEtheChad Jan 25 '13 at 07:41
  • I did not know you were attempting to append script tags. Try reversing the `.html(res)` and `.appendTo('body')`. – THEtheChad Jan 25 '13 at 07:42
  • my question already has the `template.html` which contain script tags. i have already provided link a performance test for the `$('
    ')`. its almost 50% slower than `document.createElement("div")`.
     – Sandeep Jan 25 '13 at 07:45
  • even if the reverse its the same as i was doing. you used `jquery` i used `vanilla javascript`. my issue is with `IE8 and lower` browsers. – Sandeep Jan 25 '13 at 07:47
  • Yes, but 50% slower than .000000000000000001 is still .00000001. I bet there's several operations in your program that are eating significantly more computations. And you're correct about the script tags, that was my mistake. – THEtheChad Jan 25 '13 at 07:47
  • ya there would be i agree that but its better to go with a performance oriented script. – Sandeep Jan 25 '13 at 07:54