Append to div, rather than body [duplicate]

Question

Possible Duplicate:
Inserting an element
How to do insert After() in JavaScript without using a library?

I have this little bit of javascript in a project which adds a chat window after the body of the page, I'd like to change it so that it adds the chat window AFTER my specified div "myPublisherDiv". I think this is pretty simple, any ideas? Thanks in advance!

var div = document.createElement('div');
    div.setAttribute('id', 'stream' + streams[i].streamId);
    document.body.appendChild(div);

Mmh, I just noticed that your title and the text of your question differ... if you only want to append, it seems you just need to learn about getElementById: developer.mozilla.org/en/DOM/document.getElementById — Felix Kling
– Felix Kling, Commented Apr 23, 2012 at 21:40
FYI, div.setAttribute('id', 'stream' + streams[i].streamId); can be written div.id = 'stream' + streams[i].streamId;; id is a reflected property on elements and is universally supported. — T.J. Crowder
– T.J. Crowder, Commented Apr 23, 2012 at 21:44

Community · Accepted Answer · 2017-05-23 12:12:09Z

1

This is a bit trickier. insertBefore is simple, for inserting after a node I wrote a litte helper function:

function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

var div = document.createElement('div');
...
insertAfter(document.getElementById("myPublisherDiv"), div);

But see also https://stackoverflow.com/a/1559632/1048572

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Apr 23, 2012 at 21:42

Bergi

670k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

Amberlamps Over a year ago

Rather use nextSibling instead of nextNode

Bergi Over a year ago

Oops, already edited. Thanks anyway :-)

Community · Accepted Answer · 2017-05-23 12:21:16Z

1

This should do it..

var div = document.createElement('div');
div.setAttribute('id', 'stream' + streams[i].streamId);

var target = document.getElementById('myPublisherDiv');

target.parentNode.insertBefore(div, target.nextSibling);

ripped from How to do insert After() in JavaScript without using a library?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Apr 23, 2012 at 21:43

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

Felix Kling Over a year ago

Shouldn't you vote to close it as a duplicate then? ;)

Gabriele Petrioli Over a year ago

just did.. <excuse> i did update the code to match the OP's code, doesn't that count for something ? :p </excuse>

ajax333221 · Accepted Answer · 2012-04-23 21:47:57Z

1

Put an id to your div

<div id="myDiv">..</div>

And then append things to it with the appendChild:

document.getElementById("myDiv").appendChild(div);

edited Apr 23, 2012 at 21:47

answered Apr 23, 2012 at 21:39

ajax333221

11.8k16 gold badges64 silver badges95 bronze badges

4 Comments

Amberlamps Over a year ago

That actually replaces just the content.

ajax333221 Over a year ago

@Amberlamps oops, I mean +=

T.J. Crowder Over a year ago

Using += with innerHTML is an anti-pattern which causes the browser to do a lot more work than required, and wipes out event handlers on the content within. Use appendChild.

ajax333221 Over a year ago

@T.J.Crowder thanks for the suggestion, I didn't know it was that bad

Collectives™ on Stack Overflow

Append to div, rather than body [duplicate]

3 Answers 3

2 Comments

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

4 Comments

Linked

Related