使用 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>標簽

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>

必須為html 4.0 合規性設置內容類型。

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>`); } );

Answer 4

我更喜歡使用這樣的東西：

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

我覺得它很干凈，+ 連接讓你知道我們正在使用相同的黑色，它讓你可以靈活地添加變量。