CODEWITHSUNDEEP
javascriptjqueryhtml
Ginzo Milani
Ginzo Milani

Reputation: 418

Javascript store html/jquery in a variable

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).

Upvotes: 2

Views: 2457

Answers (3)

guest271314
guest271314

Reputation: 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>

Upvotes: 2

Kirill Slatin
Kirill Slatin

Reputation: 6173

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

Upvotes: 0

Barbarrosa
Barbarrosa

Reputation: 195

Normally you want to keep JavaScript out of the HTML entirely and just bind to the relevant DOM events, e.g. $(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, e.g. 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.

Upvotes: 0

Related Questions