[RESOLVED]How to add html elements dynamically using JavaScript?

I have two image buttons Add and Remove, following these two buttons i have a DDL and TXTBox.

My Requirement is when i click on Add image button another row must appear showing ADD,Remove, DDL and TXTBox

and when i click on Remove the row must be deleted.


If you are fine with knockout.js, check this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <tbody data-bind="foreach: items">
                <input type="button" value="Add" data-bind="click: $root.addItem" />
                <input type="button" value="Remove" data-bind="click: $root.removeItem" />
                <select data-bind="options: $root.options, value: option, optionsText: 'text'"></select>
                <input data-bind="value: name" />
function Item(name, option) {
    var self = this;
    self.name = name;
    self.option = ko.observable(option);
function ViewModel() {
    var self = this;
    self.options = [{
        text: "one",
        val: 1
    }, {
        text: "two",
        val: 2

    // Editable data
    self.items = ko.observableArray([
    new Item("Steve", self.options[0]),
    new Item("Bert", self.options[0])]);
    self.addItem = function () {
        self.items.push(new Item("", self.options[0]));
    self.removeItem = function (item) {
ko.applyBindings(new ViewModel());

The below url uses pure javascript alone to achive the same functionality:


maybe you need it. hope this help you


Leave a Reply