Injecting html snippet with JQuery into existing html page

Question

I want to inject certain html snippet with JQuery into existing html page. Existing snippet:

<table class="course hoverHighlight">
    <tbody>...</tbody>
       ...
</table>

I want to inject:

<thead>
        <tr>
            <th class="title">Course</th>
            <th class="author">Author</th>
            <th class="level">Level</th>
            <th class="rating">Rating</th>
            <th class="duration">Duration</th>
            <th class="releaseDate">Released</th>
        </tr>
</thead>

before tbody tag.

<table class="course hoverHighlight">
    <thead>...</thead>
    <tbody>...</tbody>

</table>

I have tried this code but it didn`t work:

function() {
    var theadInjection= $("<thead>
    <tr>
        <th class="title">course</th>
        <th class="author">author</th>
        <th class="level">level</th>
        <th class="rating">rating</th>
        <th class="duration">duration</th>
        <th class="releasedate">released</th>
    </tr>
    </thead>");
   $( '.course' ).prepend(theadInjection);

}

Simple injection like this one did work:

function() {
    var theadInjection= $("<thead></thead>");
   $( '.course' ).prepend(theadInjection);

Thanks.

Are you getting a syntax error? take a look at your quotes and you need to escape the new line — Justin Bicknell, Oct 01 '13 at 22:09
Yes there is an error: Uncaught SyntaxError: Unexpected token ILLEGAL — AndreyCh, Oct 02 '13 at 06:08

score 0 · Answer 1 · answered Oct 01 '13 at 22:12

You should be seeing a syntax error. This would work if you properly escaped your quotes and newline. In this case you can simply use single quotes:

  var theadInjection= $("<thead> \
    <tr> \
        <th class='title'>course</th> \ 
      //more headers here
    </tr> \
    </thead>");

score 0 · Answer 2 · edited May 23 '17 at 12:03

Your " around your class attributes are ending your string. You'll need to change them to ' or switch to ' around the whole string. However you also have a second problem. Javascript doesn't do multiline strings without some extra work. Creating multiline strings in JavaScript

 var theadInjection= $('<thead> \
    <tr> \
        <th class="title">course</th> \
        <th class="author">author</th> \
        <th class="level">level</th> \
        <th class="rating">rating</th> \
        <th class="duration">duration</th> \
        <th class="releasedate">released</th> \
    </tr> \
    </thead>');

Thanks, I will check this approach too. – AndreyCh Oct 02 '13 at 06:16 — AndreyCh, Oct 02 '13 at 06:16

Injecting html snippet with JQuery into existing html page

2 Answers2