通过javascript动态添加HTML
通过javascript动态添加HTML
提问于 2015-06-10 18:58:55
日安，
我有一个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>我有一个按钮，当单击该按钮时，它会在类"row paymentRow“的最后一个div之后向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>添加附加行的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);
});
});我的问题是：
是否有更清晰的方法来表示动态构造的HTML并将其分配给行？我不太喜欢这样的魔术弦。不仅如此，我需要将javascript注入DOM的地方将有多个实例。
我知道我可以将字符串放入一个资源中并从那里访问它。我还知道，可以通过将javascript模板存储到外部文件并将外部文件的内容绑定到DOM来实现这一点。
我在努力寻找可能被忽视的替代方案。
蒂娅
科森
回答 2
Stack Overflow用户
回答已采纳
发布于 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");Stack Overflow用户
发布于 2015-06-10 19:28:28
客户端绑定库(如KnockOut JS )将更适合在客户端生成动态控件。下面是一个简单的Knockout JS示例-- https://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>当您单击该按钮时，它将添加一个新行-
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30765014
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号