通过javascript动态添加HTML
[英]Dynamically adding HTML via javascript
问题描述
Good Day, 
美好的一天，
I have an ASP.NET MVC app that I'm working on and have a partial view with one row of data. 我有一个正在使用的ASP.NET MVC应用程序，并且具有包含一行数据的部分视图。
<div class="row paymentRow">
<div class="col-xs-4">Additional Invoices</div>
<div class="col-xs-8"><input type="text" style="width: 100%"/></div>
</div>
I have a button that when clicked, it adds additional rows to the DOM after the after the last div with the class "row paymentRow". 我有一个按钮，当单击该按钮时，它将在最后一个div之后的类“ rowpaymentRow”之后向DOM添加其他行。
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="Add">Add Row</button>
<button type="button" id="Ok">Ok</button>
<button type="button" id="Cancel">Cancel</button>
</div>
The jQuery to add the additional row works: jQuery添加其他行的方法如下：
$(function() {
$("#Add").click(function(e) {
e.preventDefault();
var row = '<div class="row paymentRow">' +
'<div class="col-xs-4"> </div>' +
'<div class="col-xs-8"><input type="text" style="width: 100%"/></div>' +
'</div>';
$("div.modalUploadWidth div.row:last").after(row);
});
});
My question is: 我的问题是：
Is there a cleaner way to represent the HTML that is being dynamically constructed and assigned to row? 有没有一种更干净的方法来表示正在动态构造并分配给行的HTML？ I'm not a big fan of magic strings like this. 我不喜欢这样的魔术弦。 Not only that, but there will be multiple instances of where I need to inject javascript into the DOM. 不仅如此，还有很多实例需要将javascript注入DOM。
I know that I can put the string into a Resource and access it from there. 我知道我可以将字符串放入资源中并从那里访问它。 I also know that Handlebars can do this by storing the javascript template into an external file and binding the contents of the external file to the DOM. 我也知道，Handlebars可以通过将javascript模板存储到外部文件中并将外部文件的内容绑定到DOM来做到这一点。
I'm trying to find alternatives I may be overlooking. 我正在尝试寻找我可能忽略的替代方案。
TIA, TIA，
coson 子
2 个解决方案
解决方案1
2 2015-06-10 19:28:28
Client side binding library like KnockOut JS would be more appropriate to make dynamic controls on client side. 像KnockOut JS这样的客户端绑定库更适合在客户端进行动态控件。 Here goes a simple Knockout JS Sample - https://dotnetfiddle.net/fmwTtJ 这是一个简单的Knockout JS示例Knockout JS : //dotnetfiddle.net/fmwTtJ
<!DOCTYPE html>
<html lang="en">
<head>
<!-- JS includes -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
</head>
<table>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody data-bind="foreach: persons">
<tr>
<td><input data-bind="value: LastName"/></td>
<td><input data-bind="value: FirstName"/></td>
</tr>
</tbody>
</table>
<button data-bind="click: $root.addPerson ">Click</button>
<script>
var ViewModel = function() {
var self = this;
self.persons = ko.observableArray([]);
self.addPerson = function(){
self.persons.push(new Person('Last Name','First Name'));
};
}
var Person = function(lastName, firstName) {
var self = this;
self.LastName = ko.observable(lastName);
self.FirstName = ko.observable(firstName);
};
vm = new ViewModel()
ko.applyBindings(vm);
</script>
</html>
When you click on the button, it will add a new row - 当您点击按钮时，它将添加一个新行-
解决方案2
0 已采纳 2015-06-10 19:17:42
//take existing row (you've said there is always at least one row)
$(".paymentRow").
//take last (maybe there s already more than one)
last().
// create deep copy
clone().
//append it as last element to the parent element
appendTo(".modalUploadWidth");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.