CODEWITHSUNDEEP
javascriptprototypejs
TerranRich
TerranRich

Reputation: 1297

Inserting multiple elements into another element in PrototypeJS?

In PrototypeJS, is there a more efficient way to insert multiple Element objects into an element? Here is the code I have now:

var calendar_elem = new Element('div', {
    'id': 'my_calendar'
}).insert({
    bottom: title_elem   // assume these are all Element objects
}).insert({
    bottom: days_of_week_elem
}).insert({
    bottom: month_calendar_elem
}).insert({
    bottom: footer_elem
});

Can the bottom index contain an array, or must it contain only one Element/string of HTML? Would it be more efficient to get the HTML of each element being inserted, concatenate them, and pass that into bottom instead? Thanks!

Upvotes: 1

Views: 354

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Dom manipulations are expensive because they cause page repaint/reflow after each change. It's best to build up your HTML as a string (or in memory) and insert them into the DOM all in one go.

Upvotes: 1

TerranRich
TerranRich

Reputation: 1297

Here is one solution I thought of a few minutes after posting the question:

[title_elem, days_of_week_elem, ...].each(function(obj)
{
    calendar_elem.insert({
        bottom: obj
    });
});

But I was hoping for a method that was built into PrototypeJS for doing this. If this is the only way of making the code more efficient, please let me know. Thanks.

Upvotes: 0

Related Questions