Append to div, rather than body

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`: https://developer.mozilla.org/en/DOM/document.getElementById — Felix Kling, Apr 23 '12 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](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-63534901) and is universally supported. — T.J. Crowder, Apr 23 '12 at 21:44

ajax333221 · Answer 1 · 2012-04-23T21:47:57.410

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 '12 at 21:47

answered Apr 23 '12 at 21:39

ajax333221

11,436
16
61
95

That actually replaces just the content. – Amberlamps Apr 23 '12 at 21:42
@Amberlamps oops, I mean `+=` – ajax333221 Apr 23 '12 at 21:43
1

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`. – T.J. Crowder Apr 23 '12 at 21:45
@T.J.Crowder thanks for the suggestion, I didn't know it was that bad – ajax333221 Apr 23 '12 at 21:48

score 1 · Answer 2 · edited May 23 '17 at 12:12

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 '17 at 12:12

Community

1
1

answered Apr 23 '12 at 21:42

Bergi

630,263
148
957
1,375

1

Rather use `nextSibling` instead of `nextNode` – Amberlamps Apr 23 '12 at 21:44
Oops, already edited. Thanks anyway :-) – Bergi Apr 23 '12 at 21:45

score 1 · Answer 3 · edited May 23 '17 at 12:21

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 '17 at 12:21

Community

1
1

answered Apr 23 '12 at 21:43

Gabriele Petrioli

191,379
34
261
317

3

Shouldn't you vote to close it as a duplicate then? ;) – Felix Kling Apr 23 '12 at 21:43
1

just did.. * i did update the code to match the OP's code, doesn't that count for something ? :p * – Gabriele Petrioli Apr 23 '12 at 21:50

Append to div, rather than body

3 Answers3