How can I use innerHTML without removing entire html inside of tag?

Question

I have searched almost whole internet but couldn't able to get a solution about this..

Suppose that we have a div element with some html inside of it. After selecting this tag by its id (or other selectors, whatever) and if I use "innerHTML" method, I lost all html inside of the tag. What can i do to not destroy html parts inside of the tag? I just want to add something "more", not to "destroy all" and then insert something into new instead.

document.getElementById('something').innerHTML = document.getElementById('something').innerHTML + new_html_to_append;

the method above doesn't work for 3rd iteration, or in a for loop so it's useless for me.. i need something fits infinite supplementation.

Thank You!

(I know .append() method but i am not allowed to use JQuery there.)

Show your loop code that doesn't work. The snippet you posted shouldn't have problems, probably it's your loop logic what's wrong... — gustavohenke, Jun 07 '13 at 14:34
`document.getElementById('something').innerHTML += new_html_to_append;`? or indeed `appendChild` which is pure javascript after all - https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild — Mark Walters, Jun 07 '13 at 14:34
pls share your code so that we can see the loop you have used — Bhushan Kawadkar, Jun 07 '13 at 14:36
see this link http://stackoverflow.com/questions/6867003/javascript-appendchild — Bhushan Kawadkar, Jun 07 '13 at 14:38

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

Using innerHTML() can result in some unexpected behaviour. Look at alternatives like appendChild() from here:

How to append data to div using javascript?

edited May 23 '17 at 11:57

Community

1
1

answered Jun 07 '13 at 14:36

dKen

3,078
1
28
37

bugwheels94 · Answer 2 · 2013-06-07T14:48:44.483

0

Use AppendChild() .In using this function be aware to use the correct functions like if you have to add HTML Element like div.Then Use

obj=document.createElement(something);
document.getElementById("something").appendChild(obj);

But if its a Text Node then

obj=document.createTextNode(something);
document.getElementById("something").appendChild(obj);

edited Jun 07 '13 at 14:48

answered Jun 07 '13 at 14:36

bugwheels94

30,681
3
39
60

all developers on the project have added something new into code since years that i can't count and now it's a total mess. I can't copy whole code here cos there are a lot of node it contains including an old ajax engine, some parts works only in server, etc. long story short, a total mess. by the way, appendChild works for now, thank you! – Said Bahadır Kaya Jun 07 '13 at 15:01
so you mean you don't know whether the something is Element or just text ,right? – bugwheels94 Jun 07 '13 at 15:03

score -1 · Accepted Answer · answered Jun 07 '13 at 14:34

-1

appendChild()

...................................

answered Jun 07 '13 at 14:34

7stud

46,922
14
101
127

How can I use innerHTML without removing entire html inside of tag?

3 Answers3