How to implement "add new item" functionality in JavaScript?

Question

The title isn't very descriptive but I couldn't find a better one. Feel free to edit it.

Basically what I'm looking for is the best way to do the following:

add new item

When the user clicks "Add New Item", a new row is added with an indentical text box and drop down as above. The options I can think of are the following:

Hardcode the HTML in the JavaScript code. This is obviously a hideously ugly solution.
Assemble the HTML from DOM nodes (or jQuery objects). This is very ugly too.
Use a client-side template system. I used one of those once and it was pretty weird (it used <script language="html"> tags to define the templates).
Make an ad-hoc client-side "template" and hide it somehow with CSS.
Make an AJAX request to fetch the HTML. This is slow and uses server resources unnecessarily.

What do you suggest? I'm not completely satisfied with any of the above solutions.

Does it matter if jQuery is used, or would you like a plain-jane javascript solution? — Brad Christie
– Brad Christie, Commented Nov 13, 2012 at 19:40
Clone the last row, amend the ids (if any) and append to the parent of the current last row. — David Thomas
– David Thomas, Commented Nov 13, 2012 at 19:40
@DavidThomas: that looks like a pretty good solution, thanks. Maybe expand it into an answer so I can upvote it? — Botond Balázs
– Botond Balázs, Commented Nov 13, 2012 at 19:45

Brad Christie · Accepted Answer · 2012-11-13 19:49:15Z

1

Assuming the super-simple approach and that your format is in a table:

<table>
    <tr>
        <td><input type="text" name="item_name" placeholder="item name" /></td>
        <td><select name="item_type"><option value="" selected="selected">Type</option></select></td>
    </tr>
    <tr>
        <td><input type="text" name="item_name" placeholder="item name" /></td>
        <td><select name="item_type"><option value="" selected="selected">Type</option></select></td>
    </tr>
    <tr>
        <td colspan="2" id="add">+ Add new item</td>
    </tr>
</table>

You can use the following:

$('#add').on('click',function(e){
    var $this = $(this);
    var $newRow = $this.closest('table').find('tr:first').clone();
    $newRow.find(':input').val('');
    $newRow.insertBefore($this.parent());
});

Broken down:

We give the last item an ID to make it easier to bind a click event to.
Use jQuery and bind the click event to that ID which:
- Grabs the current table we're clicking within ($this.closest('table'))
- Locates the first row within that table and duplicates it (.clone())
- Remove any populated values that may be present (.find(':input').val(''))
- Append this new cloned row to the table just above the "add new item" row ($newRow.insertBefore(...))

You can also take the template approach, but that's really up to you and how much control you'd like over the output.

answered Nov 13, 2012 at 19:49

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Botond Balázs Over a year ago

Thank you. This is pretty maintainable (the HTML can change a lot before it breaks) and also lightweight.

Botond Balázs Over a year ago

Though I think I'll use a wrapper div instead of a table :)

Botond Balázs Over a year ago

I also like how you prefix variables that contain jQuery objects with a '$'. Is that a common thing?

Brad Christie Over a year ago

@botond don't know if it's common place, but I tend to like it as it helps keep normal value variables and jQuery objects distinguished. I also agree with divs, but table is a lot easier to display with minimal formatting or styling requirements.

Wouter van Nifterick · Accepted Answer · 2012-11-13 19:48:39Z

1

If you're already using a framework like jquery or sencha on your page, you might as well make use of it.

Otherwise, i'd keep it as simple as possible. This does't look like a very important core functionality, so don't create something that requires extra https requests or even entire libraries to be loaded. Cloning or generating the html might not look elegant, but it'll be:

fast to implement
easy to read, and therefore easy to debug
waste few resources, and extremely fast
stable
doesn't need server side code or extra http requests
it'll be easy to change the implementation later on if needed

Don't create something that's overkill for somerhing as trivial as this.

answered Nov 13, 2012 at 19:48

Wouter van Nifterick

24.2k7 gold badges82 silver badges123 bronze badges

Comments

David Thomas · Accepted Answer · 2012-11-13 20:25:00Z

While I realise you already have an accepted answer, I thought I'd offer a plain JavaScript means of achieving the same:

function closest(el, tag) {
    if (!el || !tag) {
        return false;
    }
    else {
        var curTag = el.tagName.toLowerCase();
        return curTag == tag.toLowerCase() && curTag !== 'body' ? el : closest(el.parentNode, tag);
    }
}

function addRow(el) {
    if (!el) {
        return false;
    }
    else {
        var tr = closest(el, 'tr').previousElementSibling,
            newRow = tr.cloneNode(true);
        tr.parentNode.insertBefore(newRow, tr.nextSibling);
    }
}

document.getElementById('add').onclick = function() {
    addRow(this);
}

JS Fiddle demo.

Revised the above a little, to add a simple shim to cope with those browsers that don't implement previousElementSibling:

function closest(el, tag) {
    if (!el || !tag) {
        return false;
    }
    else {
        var curTag = el.tagName.toLowerCase();
        return curTag == tag.toLowerCase() && curTag !== 'body' ? el : closest(el.parentNode, tag);
    }
}

function prevElementSiblingShim(el) {
    if (!el) {
        return false;
    }
    else {
        var prevSibling = el.previousSibling;
        return prevSibling.nodeType == 1 ? prevSibling : prevElementSiblingShim(prevSibling);
    }
}

function addRow(el) {
    if (!el) {
        return false;
    }
    else {
        var par = closest(el, 'tr'),
            tr = par.previousElementSibling || prevElementSiblingShim(par),
            newRow = tr.cloneNode(true);
        tr.parentNode.insertBefore(newRow, tr.nextSibling);
    }
}

document.getElementById('add').onclick = function() {
    addRow(this);
}

References:

cloneNode().
insertBefore.
nextSibling.
nodeType.
parentNode.
previousElementSibling ^{Compatibility}.
previousSibling.
tagName.
toLowerCase().

Diodeus - James MacFarlane · Accepted Answer · 2012-11-13 19:46:41Z

0

Inserting HTML from a string into the DOM is the most efficient way. Unless you're inserting hundreds at once, it doesn't really matter.

answered Nov 13, 2012 at 19:46

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Botond Balázs Over a year ago

Maybe it's efficient but I won't be doing thousands of inserts in a second so readability and maintainability is more important to me. But thanks anyway.

Collectives™ on Stack Overflow

How to implement "add new item" functionality in JavaScript?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related