javascript: how to dynamicly generate a div in front end?

Question

I'm writing a chat function that one user might chat with multiple ones at one time, which need generate multiple div to load the chat page. Typically, I just write div with an id there, and call it using jQuery. Now, since I don't know how many div need to be called at the same time, I can not write it in advance. Any idea? Or if you have better solution, let me know too. Thank you very much.

You should be able to dynamically insert a `div` element into your page by first selecting the parent element and using the `.append("
stuff
)`. See [this](http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery) for more info. — Kris Schouw, Sep 07 '11 at 21:04

score 1 · Accepted Answer · answered Sep 07 '11 at 21:10

This method will allow you to assign unique IDs to each chat div so you can send the chat output to the specific page elements.

var number_of_chat_sessions = 4; // Adjust according to your needs, or assign programmatically

for ( var i=0; i<number_of_chat_sessions; i++) {
    var chat_div = $( "<div>Initial output here</div>" ).attr( "id" , "chat_session_" + i );
    $( "#chat_container" ).append( chat_div );
}

AlexBay · Answer 2 · 2011-09-07T21:08:47.110

0

Without jQuery need:

var newDiv = document.createElement('div');
newDiv.setAttribute('id', "your_current_id");
wrapper.appendChild(newDiv);

wrapper is the JavaScript object that will contain the div

Demo here

edited Sep 07 '11 at 21:08

answered Sep 07 '11 at 21:02

AlexBay

1,323
2
14
26

This will apply the ID "id" to every new div, which is invalid. IDs must be unique. – George Cummins Sep 07 '11 at 21:04
It was just an example and it creates only one div indeed – AlexBay Sep 07 '11 at 21:06
OP: "...need generate multiple div..." – George Cummins Sep 07 '11 at 21:07
This is the procedure to dynamically generate a new div with an id, generating more is just changing the id, like in my demo – AlexBay Sep 07 '11 at 21:10

Darin Dimitrov · Answer 3 · 2011-09-07T21:07:36.583

0

for (var i = 0; i < 10; i++) {
    $('body').append(
        $('<div/>', {
            id: 'element_' + i,
            html: 'item ' + i
        })
    );
}

Demo.

edited Sep 07 '11 at 21:07

answered Sep 07 '11 at 21:02

Darin Dimitrov

1,023,142
271
3,287
2,928

Based on the OP's stated goal, he will likely need to assign a unique ID to each div so chat events can be forwarded to the correct element. – George Cummins Sep 07 '11 at 21:06
@George Cummins, I have updated my answer to take into account your suggestion. – Darin Dimitrov Sep 07 '11 at 21:08

javascript: how to dynamicly generate a div in front end?

3 Answers3