通過javascript動態添加HTML

Question

美好的一天，

我有一個正在使用的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>

我有一個按鈕，當單擊該按鈕時，它將在最后一個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>

jQuery添加其他行的方法如下：

$(function() {
    $("#Add").click(function(e) {
        e.preventDefault();

        var row = '<div class="row paymentRow">' +
            '<div class="col-xs-4">&nbsp;</div>' +
            '<div class="col-xs-8"><input type="text" style="width: 100%"/></div>' +
            '</div>';

        $("div.modalUploadWidth div.row:last").after(row);
    });
});

我的問題是：

有沒有一種更干凈的方法來表示正在動態構造並分配給行的HTML？ 我不喜歡這樣的魔術弦。 不僅如此，還有很多實例需要將javascript注入DOM。

我知道我可以將字符串放入資源中並從那里訪問它。 我也知道，Handlebars可以通過將javascript模板存儲到外部文件中並將外部文件的內容綁定到DOM來做到這一點。

我正在嘗試尋找我可能忽略的替代方案。

TIA，

子

Answer 1

像KnockOut JS這樣的客戶端綁定庫更適合在客戶端進行動態控件。 這是一個簡單的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>

當您點擊按鈕時，它將添加一個新行-

在此處輸入圖片說明

Answer 2

//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");

通過javascript動態添加HTML

問題描述

2 個解決方案

解決方案1
2 2015-06-10 19:28:28

解決方案2
0 已采納 2015-06-10 19:17:42

通過javascript動態添加HTML

問題描述

2 個解決方案

解決方案1 2 2015-06-10 19:28:28

解決方案2 0 已采納 2015-06-10 19:17:42

解決方案1
2 2015-06-10 19:28:28

解決方案2
0 已采納 2015-06-10 19:17:42