Dynamically adding HTML via javascript

Question

Dynamically adding HTML via javascript

118 Views Asked by coson At 17 April 2025 at 20:12

Good Day,

I have an ASP.NET MVC app that I'm working on and have a partial view with one row of data.

<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 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:

$(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);
    });
});

My question is:

Is there a cleaner way to represent the HTML that is being dynamically constructed and assigned to row? 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.

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.

I'm trying to find alternatives I may be overlooking.

TIA,

coson

Original Q&A

There are 2 best solutions below

ramiramilu On 10 June 2015 at 19:28

Client side binding library like KnockOut JS would be more appropriate to make dynamic controls on client side. Here goes a simple Knockout JS Sample - 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>

When you click on the button, it will add a new row -

enter image description here

**bjaksic** · Accepted Answer

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

Dynamically adding HTML via javascript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in DOM

Trending Questions

Popular # Hahtags

Popular Questions