Can I prepend an entire block of html?

Question

I am attempting to keep all my code on one page (I know, not usual) as a challenge. I am attempting to keep everything within the <style> tags.

I was able to $('body').prepend('<p>Text</p>'), however I am attempting to add a navigation bar the same way with jQuery and I get errors.

EDIT: Here is the block of code with the navbar in place of the Text from above. Error I get is "Unexpected Token, ILLIGAL" for the 3rd line.

 $(document).ready(function(){
          $('body').css({'background-color':'#C0DEED'});
          $('body').prepend('<div class="navbar-fixed">
                               <nav>
                                <div class="nav-wrapper">
                                  <a href="#!" class="brand-logo">Logo</a>
                                  <ul class="right hide-on-med-and-down">
                                    <li><a href="sass.html">Sass</a></li>
                                    <li><a href="badges.html">Components</a></li>
                                  </ul>
                                </div>
                               </nav>
                             </div>')
          $('body').append('<div class="footer row span12"><p>Footer</p></div>');

});

*I am using the Navbar documentation from materialize which is correctly referenced to in file. *Also, the appends fine, which is why I am wondering what I'm running into? Do I need ; or , after all the lines?

Append didn't work. I went and deleted all the spaces and had all syntax all together and it worked. Looks messy and isn't very readable. Would still love to learn how I can keep the readability with individual lines within the prepend('')? — jehicks2, Sep 08 '15 at 18:45
@jehicks2 Have you tried splitting them into individual line and then appending them to keep the readability? Eg: `.prepend('
' + '
' + '
');` You should be able to put them in separate lines, I think (Here the comment box won't let me do that to illustrate my point). — afrin216, Sep 08 '15 at 19:14

score 0 · Answer 1 · answered Sep 08 '15 at 19:17

You can't break the line while in a string. To get what you want, you need to

1) Separate each line into its own string and concatenate them using +:

$('body').prepend('<div class="navbar-fixed">'+
                    '<nav>'+
                        '<div class="nav-wrapper">'+
                            '<a href="#!" class="brand-logo">Logo</a>'+
                            '<ul class="right hide-on-med-and-down">'+
                                '<li><a href="sass.html">Sass</a></li>'+
                                '<li><a href="badges.html">Components</a></li>'+
                            '</ul>'+
                        '</div>'+
                    '</nav>'+
                  '</div>')

2) Or use backslash (\) at the end of each line (this makes the string continue to the next line):

$('body').prepend('<div class="navbar-fixed">  \
                    <nav>  \
                        <div class="nav-wrapper">  \
                            <a href="#!" class="brand-logo">Logo</a>  \
                            <ul class="right hide-on-med-and-down">  \
                                <li><a href="sass.html">Sass</a></li>  \
                                <li><a href="badges.html">Components</a>  </li>  \
                            </ul>  \
                        </div>  \
                    </nav>  \
                  </div>')

It's up to you to decide of what is more readable.

In terms of compatibility, the first option (concatenation using +) is preferred - as the backslash it is not in the ECMA 5.1 spec and could not be supported (though I have no evidence on that).

Thank you, this worked! I had been trying to put it in the body as regular html and it wasn't working. Now that it is working as a prepend element, I am attempting to get it to work as regular html. — jehicks2, Sep 08 '15 at 19:38

Can I prepend an entire block of html?

1 Answers1