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

"I have code that pulls dynamically created html", which code? How are you rendering your html. Chances are the issue is there (it's probably escaping < to < and so on). — JCOC611
– JCOC611, Commented Jun 9, 2015 at 1:15
I recommend making it clear what libraries you're using. It appears that you're using the countdown timer from this website. gieson.com/Library/projects/utilities/countdown — Barbarrosa
– Barbarrosa, Commented Jun 9, 2015 at 3:02

guest271314 · Accepted Answer · 2015-06-09 02:27:51Z

2

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>

edited Jun 9, 2015 at 2:27

answered Jun 9, 2015 at 2:22

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

Ginzo Milani Over a year ago

I mean yours worked but when the div is rendered, it literally replaces the page with just the timer, same with the other proposed solutions (except I couldn't get parsehtml to work).

Barbarrosa · Accepted Answer · 2015-06-09 01:49:34Z

0

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.

answered Jun 9, 2015 at 1:49

Barbarrosa

1956 bronze badges

7 Comments

Ginzo Milani Over a year ago

It absolutely must contain javascript just because I need the javascripts function to execute at a certain location as it will create a timer wherever it is executed

Barbarrosa Over a year ago

So you need to control the context of the execution, which can be done using <function-name>.apply?

Barbarrosa Over a year ago

@GinzoMilani Click the blue square to see it.

Barbarrosa Over a year ago

@GinzoMilani ... and also definitive proof that you don't need the JS to be at exactly that location in the HTML.

Ginzo Milani Over a year ago

I used yours mixed with guest271314s reply but the timer literally replaces the whole page

|

Kirill Slatin · Accepted Answer · 2015-06-09 02:10:49Z

0

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

edited Jun 9, 2015 at 2:10

answered Jun 9, 2015 at 1:40

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

2 Comments

Ginzo Milani Over a year ago

I have tried to use parseHTML however it shows up as it doesn't exist I am running a cloud version of jquery from here: code.jquery.com/jquery-2.0.3.min.js

Kirill Slatin Over a year ago

@GinzoMilani I've added working fiddle to the answer using your jquery link

Collectives™ on Stack Overflow

Javascript store html/jquery in a variable

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related