Javascript - 将 html 写入 "append"函数的更好方法

Question

假设我有以下代码:

var rightPane = $("#right");
    // Draw the right pane
    rightPane.html('<h2>' + task.task + '<h2> <hr />' +
                     'data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />' + 
                     'data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />' + 
                     'data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />' + 
                     '<input type="button" id="subUpdated" value="Save">');

我有什么方法可以像简单的 HTML 代码一样编写 HTML 代码，并且不需要 qoutes 和加号？

Answer 1

在当前版本的 JavaScript 中，您可以通过转义行尾的换行符来完成此操作，这位更好，但请注意，前导空格将包含在字符串中，并且您仍然必须使用串联来交换您的值:

var rightPane = $("#right");
// Draw the right pane
rightPane.html('<h2>' + task.task + '<h2> <hr />\
data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />\
data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />\
data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />\
<input type="button" id="subUpdated" value="Save">');

在 JavaScript 的下一个版本“ES6”中，我们将拥有模板字符串，它可以是多行的，并且可以让您使用 ${... 轻松交换文本。 }:

// REQUIRES ES6
var rightPane = $("#right");
// Draw the right pane
rightPane.html(`
    <h2>${task.task}<h2> <hr />
    data1: <input type="text" id="data1" value="${task.data1}" /> <br /> 
    data2: <input type="text" id="data2" value="${task.data2}" /> <br /> 
    data1: <input type="text" id="data3" value="${task.data3}" /> <br /> 
    <input type="button" id="subUpdated" value="Save">
    `);

(字符串中再次包含前导空格。)

要在 ES6 之前执行此操作，您可以使用多个模板库(Handlebars、Mustache、RivetsJS)中的任何一个。

对于一个非常简单的版本，您可以使用 the function I wrote另一个问题。