Javascript—将html写入“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">');

var rightPane=$（“#右”）；
//绘制右窗格
html（“”+task.task+”
+
“数据1:
”+
“数据2:
”+
“数据1:
”+
'');

---

我想知道有什么方法可以像编写简单的HTML代码一样编写HTML代码，而不使用qoutes和加号？

在当前版本的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">');

（字符串中同样包含前导空格。）

要在ES6之前实现这一点，可以使用几个模板库中的任意一个（把手、胡子、铆钉）

---

对于一个非常简单的版本，您可以用它来回答另一个问题。

除了其他人提到的模板之外，目前还没有。但是，您可以做的是在主文档中包含初始HTML代码，然后使用

rightPane.val（task.data1）设置值，等等。
您可以尝试执行以下操作：

但正如哈克托建议的那样，最好学会使用模板。以下划线.js（）为例，另一种方法是：

var $h2     = $("<h2>", {text : task.task});
var $data1  = $("<input>", {type : 'text', value : task.data1});
var $data2  = $("<input>", {type : 'text', value : task.data2});
var $data3  = $("<input>", {type : 'text', value : task.data3});
var $button = $("<input>", {type : 'button', value : 'Save'});

rightPane.append($h2, $data1, $data2, $data3, $button);

var$h2=$（“”，{text:task.task}）；
var$data1=$（“”，{type:'text'，值：task.data1}）；
var$data2=$（“”，{type:'text'，值：task.data2}）；
var$data3=$（“”，{type:'text'，值：task.data3}）；
var$button=$（“”，{type:'button'，value:'Save'}）；
追加（$h2，$data1，$data2，$data3，$button）；

在扫描代码时，这可能比在
.html（）
函数中切换要容易一些。
您可以看看JavaScript模板引擎。比如车把、胡子等等。你可以看到一些流行的：你可以把它们看作用户控件，类似于你在ASP.NET中看到的

这是代码中的把手示例：

<h2>{{task}}<h2> <hr />
data1: <input type="text" id="data1" value="{{data1}}" /> <br /> 
data2: <input type="text" id="data2" value="{{data2}}" /> <br /> 
data1: <input type="text" id="data3" value="{{data3}}" /> <br /> 
<input type="button" id="subUpdated" value="Save">

{{task}}

数据1:

数据2:

数据1:

您可以创建自己的超级简单的“模板引擎”


像通常的元素一样，在页面的标记中编写模板
为模板容器元素指定一个属性来表示其作为模板的角色，例如
数据模板的数据属性
当DOM就绪时，克隆并分离所有
数据模板
元素

在某些情况下，根据需要插入值，然后将编译后的模板重新插入页面

例如：


$（文档）.ready（函数（）{
变量模板=$（“[数据模板]”）.detach（）.clone（）；
var值={foo:'bar'，yipee:'yahoo'}；
$（“按钮”）。单击（函数（）{
用于（值中的var prop）{
template.find（“[data value=“”+prop+“]”）html（values[prop]）；
$（“#容器”）.append（模板）；
}
});
});

插入
它被称为Template如上所述查看
下划线.js
或
把手
AngularJS是一个模板库？@Billie:AngularJS是一个应用程序框架。其中一个很小的部分是模板。
<h2>{{task}}<h2> <hr />
data1: <input type="text" id="data1" value="{{data1}}" /> <br /> 
data2: <input type="text" id="data2" value="{{data2}}" /> <br /> 
data1: <input type="text" id="data3" value="{{data3}}" /> <br /> 
<input type="button" id="subUpdated" value="Save">