Appending an element inside the child of another element

Question

I am trying to append a link ("a" tag) to a child of the "topBar" element. Here is what i've got so far:

document.getElementById('topBar').innerHTML += '<a href="http://orteil.dashnet.org/experiments/cookie/" target="blank">Cookie Clicker Classic</a>';

This puts the link inside the "topBar" element as a new child, but I want it inside the existing child of the "topBar" element. How do I do this? The child is just within a div tag, it has no id... I have done some reasearch on .appendChild but I haven't found any related help, thus why I am asking here...

I would be very appreciative for any ideas or even a solution to be posted. Thanks, Daniel

EDIT: topBar has only one child, it is nameless

also, am I doing something wrong with this?

setTimeout(doSomething, 1000); function doSomething() { var element = document.getElementById('particles'); if (typeof(element) != 'undefined' && element != null) { var newLink = document.createElement('a'); newLink.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/'); newLink.target = 'blank'; document.getElementById('topBar').appendChild(newLink); var del = document.getElementById('links') del.parentNode.removeChild(del); return; } else { setTimeout(doSomething, 1000); } }

EDIT: I have finished! Thanks to everyone for their help, especially Elias Van Ootegem. This is what I used:

var link=document.createElement('a'); link.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/'); link.target = 'blank'; link.appendChild( document.createTextNode('Cookie Clicker Classic') ); var add = document.getElementsByTagName('div')[1]; //this picked the second div tag in the whole document if(add.lastChild) add.insertBefore(link,add.lastChild); //appending it to the end of the child else add.prependChild(link);

You want to append it to existing child. do this existing child have an id, or you want to append to its first child or last child or before or after any chuld, please clarify — Voonic
– Voonic, Commented Sep 24, 2013 at 11:37
How many children does topBar have, and in which one you want to add? — Moazzam Khan
– Moazzam Khan, Commented Sep 24, 2013 at 11:38
Please, don't use innerHTML: it's non-standard, and is possibly subject to change in the future, read the section titled "2.5 Dynamic markup insertion" — Elias Van Ootegem
– Elias Van Ootegem, Commented Sep 24, 2013 at 11:48

Elias Van Ootegem · Accepted Answer · 2013-09-24 12:25:03Z

1

First, create the node:

var newLink = document.createElement('a'); //set attributes newLink.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/'); newLink.target = 'blank';//preferred way is using setAttribute, though //add inner text to link: newLink.appendChild( document.createTextNode('Cookie Clicker Classic')//standard way, not innerHTML );

Then, append the child, using appendChild:

document.getElementById('topBar').appendChild(newLink);

Or, given your update (your deleting some other element), use replaceChild:

document.getElementById('topBar').replaceChild( newLink,//new document.getElementById('links')//old, will be removed );

And you're there!

edited Sep 24, 2013 at 12:25

answered Sep 24, 2013 at 11:38

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

16 Comments

Zackton Jochem Over a year ago

that just does <a href="orteil.dashnet.org/experiments/cookie" target="blank"></a> I need it like this <a href="orteil.dashnet.org/experiments/cookie" target="blank">Cookie Clicker Classic</a> how do i ad the "Cookie Clicker Classic" at the end?

Elias Van Ootegem Over a year ago

@ZacktonJochem: fixed that... newLink.appendChild(document.createTextNode('link text'))

Zackton Jochem Over a year ago

Your method puts it after the child but before the end of the parent element so it does <div id=topBar><div>(child stuff)</div> <a href="orteil.dashnet.org/experiments/cookie/"; target="blank">Cookie Clicker Classic</a> </div> still need it in the child not after the child has finished. Thank you for your time so far, just about there, sorry

Elias Van Ootegem Over a year ago

@ZacktonJochem: Yes, it does, just like innerHTML += does (appends html string to existing html). the name appendChild does imply the element is appended to the existing nodes in that particular element... what did you expect?

Zackton Jochem Over a year ago

so this basically does the same as the innerHTML method, but is better because it doesn't use the innerHTML YAY! this will definatly help others, but I need it within that child element sorry. Is it possible to do something like document.getElementById('topBar.div(or .child)').appendChild(newLink);?

|

Collectives™ on Stack Overflow

Appending an element inside the child of another element

1 Answer 1

16 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Related