使用jQuery进行多行字符串插入

Question

$("#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中,我收到错误" Unexpected token ILLEGAL ".谷歌搜索后,我发现我的小脑对javascript和多行知之甚少.所以我在每一行的末尾添加了'\'.然而,我现在得到错误" 意外的标识符 ".

我想这不会像我做的那样困难:)

Answer 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>"); 
} ); 

Answer 2

更清洁的方法是使用<script>标签

/sf/answers/846855341/

<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>

必须为html 4.0合规性设置content-type .

Answer 3

使用反勾号 ` 开始和结束字符串

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