Вставка многострочной строки с использованием jQuery

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

Это работает.

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

Что-то вроде этого не делает.

В Chrome появляется ошибка " Неожиданный токен ILLEGAL". После Googling я обнаружил, что мой маленький мозг не знает много о javascript и многострочных линиях. Поэтому я добавил "\", чтобы затем завершить каждую строку. Тем не менее, теперь я получаю сообщение об ошибке " Неожиданный идентификатор".

Мне бы хотелось, чтобы это было не так сложно, как я это делаю:)

Ответ 1

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

Ответ 2

Измените все двойные кавычки для атрибутов на одинарные кавычки.

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

Ответ 3

более чистым подходом является использование тега <script>

fooobar.com/questions/660/...

<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 должен быть установлен для соответствия html 4.0.

Ответ 4

Я предпочитаю использовать что-то вроде этого:

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

Я чувствую, что очистка конкатенации + позволяет вам знать, что мы работаем с одним и тем же черным цветом, и дает вам гибкость добавления переменных.