How to replace a node in DOM with a new one?

Question

I have some DOM element which I retrieve with getElementById method.

I need to replace this element with new html-element (i.e. I want to see correctly-rendered <h1>hello</h1> in the place where the old element were shown.

How can I do that? (p.s. jquery is not allowed).

Answer 1

Have a look at replaceChild for DOM node replacement. There's an example in the link which show the replaceChild with parentNode combination.

Answer 2

I would be very cautious about using innerHTML blindly. DOM manipulation methods such as createElement/appendChild/insertBefore/replaceChild etc.. are the more "correct" way to do DOM manipulation (naturally) but there are some circumstances where innerHTML is more appropriate and some where it causes Really Bad Things.

It's a bit of a religious war tbh.