Multi-line string insert using jQuery

Question

$("#addSelect").click(function() {
        $("#optionsForm").after("Hello world.");
} );

This works.

$("#addSelect").click(function() {
        $("#optionsForm").after("<tr>
    <td><input type="text" class="optionField" value="Options" /></td>
    <td>
        <ul class="option">
            <li><select><option>Value..</option></select></li>
        </ul>
    </td>
</tr>");
} );

Something like this doesn't.

In Chrome, I get the error "Unexpected token ILLEGAL". After Googling I've discovered my teeny brain doesn't know much about javascript and multi-lines. So I added '\' to then end of each line. Yet, I now get the error "Unexpected identifier".

I'd like this to not be as difficult as I'm making it :)

score 43 · Answer 1 · answered Jun 25 '10 at 03:32

Change all the double quotes for the attributes to single quotes.

$("#addSelect").click(function() { 
        $("#optionsForm").after("<tr> \
    <td><input type='text' class='optionField' value='Options' /></td> \
    <td> \
        <ul class='option'> \
            <li><select><option>Value..</option></select></li> \
        </ul> \
    </td> \
</tr>"); 
} );

score 21 · Answer 2 · edited May 23 '17 at 12:10

21

a cleaner approach is to use <script> tag

https://stackoverflow.com/a/12097933/1416458

<script id="stuff_you_want" type="text/plain">
<tr>
    <td><input type="text" class="optionField" value="Options" /></td>
    <td>
        <ul class="option">
            <li><select><option>Value..</option></select></li>
        </ul>
    </td>
</tr>
</script>

<script>

    // pure javascript
    var text = document.getElementById("stuff_you_want").innerHTML ;

    //or using jQuery... (document ready for safety)
    $(document).ready(function() {

        var text = $("#stuff_you_want").html(); 

    }

</script>

content-type must be set for html 4.0 compliance.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 19 '12 at 14:02

jpfreire

1,268
16
23

I have error there if do not set some type of – Petr May 02 '15 at 14:28
Thanks! This works with style tags too. – Dante Cullari Dec 11 '16 at 00:40

score 17 · Accepted Answer · edited Nov 06 '19 at 17:01

17

Use back ticks ` to start and finish the string

$("#addSelect").click(function() {
    $("#optionsForm").after(`<tr>
    <td><input type="text" class="optionField" value="Options" /></td>
    <td>
        <ul class="option">
            <li><select><option>Value..</option></select></li>
        </ul>
    </td>
</tr>`);
} );

edited Nov 06 '19 at 17:01

cheesemarathon

67
7

answered Feb 28 '19 at 14:43

Glayder Wanderson

186
1
2

5

Please add some verbiage explaining your answer. – Jennifer Goncalves Feb 28 '19 at 14:47

score 0 · Answer 4 · answered Aug 16 '19 at 17:51

I prefer to use something like this:

$('<tr bgcolor="#ffffe6"><td></td><td colspan="8" id="orderNotes">'
    + inputNotes.val() + '</td> <td>' + todayStamp
    + '</td> </tr>')

I feel like it's clean the + concatenation allows you to know we're working with the same black and it gives you the flexibility of adding variables.

Multi-line string insert using jQuery

4 Answers4

Linked

Related