我可以添加一整个html块吗?

Question

我试图将所有代码保持在一个页面上(我知道，这并不常见)，这是一个挑战。我试图保持一切在<style>标签。

我能够$('body').prepend('<p>Text</p>')，但我试图添加一个导航栏与jQuery相同的方式，我得到错误。

编辑:这是用导航条代替上面的文本的代码块。我得到的错误是第三行"Unexpected Token, illegal"。

 $(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>');
});

*我正在使用从物质化这是正确引用的文件导航栏文档。*另外，附录很好，这就是为什么我想知道我遇到了什么?我需要;或者，在所有的行之后?

Answer 1

在字符串中不能换行。要得到你想要的，你需要

1)将每一行分隔成自己的字符串，并使用+:

将它们连接起来

$('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)或者在每行末尾使用反斜杠()(这使字符串继续到下一行):

$('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>')

你可以决定什么更容易读。

在兼容性方面，第一个选项(使用+连接)是首选-因为反斜线在ECMA 5.1规范中是而不是， 可能不支持(尽管我没有证据证明这一点)。