CODEWITHSUNDEEP
jquery
Xarcell
Xarcell

Reputation: 2011

jQuery: Proper Syntax For Prepending HTML

I'm new to jQuery and I'm trying to prepend some HTML. However, I keeping getting syntax error via DreamWeaver.

Here is my code:

    <script type='text/javascript'> 
      $(document).ready(function(){ 
      $(".contentpadded").prepend($unoslider);

      var $unoslider = $('
        <ul id="unoslider" class="unoslider">
            <li><img src="templates/{$template}/img/cloud-hosting.jpg" alt="" /></li>
            <li><img src="templates/{$template}/img/green-hosting.jpg" alt="" /></li>
            <li><img src="templates/{$template}/img/trusted-partners.jpg" alt="" /></li>
        </ul>
        '),
      });
   </script>

I can't figure out what's wrong with it. Any suggestions?

Upvotes: 0

Views: 231

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Change it to:

  var $unoslider = '\
    <ul id="unoslider" class="unoslider">\
        <li><img src="templates/{$template}/img/cloud-hosting.jpg" alt="" /></li>\
        <li><img src="templates/{$template}/img/green-hosting.jpg" alt="" /></li>\
        <li><img src="templates/{$template}/img/trusted-partners.jpg" alt="" /></li>\
    </ul>\
    ';

And the use the prepend() function.

Upvotes: 0

insomiac
insomiac

Reputation: 5664

Demo : http://jsfiddle.net/hVjDq/

There are two changes : 1)You string will have a syntax error as its not concatenated by "+". 2) You are prepending undefined variable, so you need to put the prepend statement after the html variable is ready.

Updated js code :

You missed "+" for concatenation..

var $unoslider = $('<ul id="unoslider" class="unoslider">'+
               '<li><img src="templates/{$template}/img/cloud-hosting.jpg" alt=""/></li>' +
               '<li><img src="templates/{$template}/img/green-hosting.jpg" alt="" /></li>' +
               '<li><img src="templates/{$template}/img/trusted-partners.jpg" alt="" /></li>' +
               '</ul>');
$(".contentpadded").prepend($unoslider);

Upvotes: 0

Ram
Ram

Reputation: 144689

You should concatenate the strings, also note that there is a redundant , in your code.

var $unoslider = $('<ul id="unoslider" class="unoslider">'+
                   '<li><img src="templates/{$template}/img/cloud-hosting.jpg" alt=""/></li>' +
                   '<li><img src="templates/{$template}/img/green-hosting.jpg" alt="" /></li>' +
                   '<li><img src="templates/{$template}/img/trusted-partners.jpg" alt="" /></li>' +
                   '</ul>');
$(".contentpadded").prepend($unoslider);

Note that you should first define the variable and then append it.

Upvotes: 2

Related Questions