Javascript store html/jquery in a variable

Question

I need the following code in a variable rendered as html and not as a string:

<div style="display:table-cell; vertical-align:middle">
    <center>
        <h1>TO THE TIME</h1>
        <script type="application/javascript">
           var myCountdown1 = new Countdown({
                                //year      : 2015,
                                month   : 11,    
                                day     : 11,     
                                hour    : 00,    
                                ampm    : "am",  
                                minute  : 00,         
                                second  : 00,       
                                width:290, 
                                height:60,  
                                rangeHi:"month",
                                rangeLo:"seconds",
                                style:"flip"
                            });

        </script>
    </center>
</div>

I tried storing it as

htmlcontent[idgrab] = '<div style="display:table-cell; vertical-align:middle">'+
'<center>'+
'<h1>TO THE TIME</h1>'+
'<script type="application/javascript">'+
'var myCountdown1 = new Countdown({'+
                                'month  : 11,'+    
                                'day    : 11,'+     
                                'hour   : 00,'+    
                                'ampm   : "am",'+    
                                'minute : 00,'+         
                                'second : 00,'+       
                                'width:290,'+ 
                                'height:60,'+  
                                'rangeHi:"month",'+
                                'rangeLo:"seconds",'+
                                'style:"flip"'+
                                '});'+

'</script>'+
'</center>'+
'</div>';

But that didn't work, basically I have code that pulls dynamically created html which I managed to grab using . html however this one I've only managed to show up as either a string using "" ; or break the site entirely.

Edit:

The normal renderer pulls code with this:

htmlcontent[idgrab] = $('#'+idgrab).html();

which works fine for basic html that does not include javascript but for this div in particular, it seems to need to be manually slotted into the array which im having trouble with because the div needs to be stored WITHOUT executing the javascript code (it needs to be executed after the array is invoked).

Answer 1

Try utilizing $.parseHTML

 var htmlcontent = {}; htmlcontent["idgrab"] = '<div style=display:table-cell; vertical-align:middle>' + '<center>' + '<h1>TO THE TIME</h1>' + '<script type="application/javascript">' + 'var myCountdown1 = new Countdown({' + 'month'+ ':'+ '11,' + 'day'+ ':'+ '11,' + 'hour'+ ':'+ '00,' + 'ampm' + ':' + '"am",' + 'minute' +':'+ '00,' + 'second' + ':' + '00,' + 'width' +':' + '290,' + 'height' +':' + '60,' + 'rangeHi' + ':'+ '"month",' + 'rangeLo' +':' + '"seconds",' + 'style' +':' + '"flip"' + '});' + '</scr'+'ipt>' + '</center>' + '</div>'; var html = $.parseHTML(htmlcontent["idgrab"], document, true); console.log(htmlcontent["idgrab"], html);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

If you'd like to parse html string into a DOM element (tree) without jquery you an do this

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

Or simply use $.parseHTML(htmlString); if you have jquery in your site

Working jsfiddle

Answer 3

Normally you want to keep JavaScript out of the HTML entirely and just bind to the relevant DOM events, eg $(document).ready(function(){}) or $(window).load(function(){}) . Most UI frameworks let you hook into several events, including when the element is first rendered to the DOM.

If you need to output HTML for use in dynamic widgets, you can try escaping them before rendering them in the DOM, eg htmlspecialchars for PHP or escape-html 's escape method for Node.js. If you took that route, best practice is probably to put that into a data-* attribute like jQuery Cycle 2 would have you do.