dynamic adding into html element

Question

A simple answer to this question is like this

document.getElementById("form").innerHTML += someHtmlString

And this works too. But my problem is, doing this cause the previous selected field to go to original state (in my case I was using < select > tag and the selected values were restored to original value).

What would be the possible solution. Is there any code that adds/appends in html tags (in my case a div tag) using only JS so that my previously selected options remains the same?

Regard

Gerben · Accepted Answer · 2011-08-20 16:57:48Z

3

Use normal DOM methods. That way the old HTML is never re-interpreted. Sample:

var div = document.createElement('div')
div.innerHTML = '<b>test</b>';
document.getElementById("form").appendChild(div);

answered Aug 20, 2011 at 16:57

Gerben

16.8k6 gold badges39 silver badges56 bronze badges

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

2 Comments

Shad Over a year ago

+1, though a reference would probably be helpful ;) developer.mozilla.org/en/…

bunkdeath Over a year ago

still gets the page refreshed :(

Marian Galik · Accepted Answer · 2011-08-20 16:54:27Z

0

Remember the selected item before appending HTML and after that select the item via JavaScript. Something like this should work:

var index = document.getElementById("idOfSelect").selectedIndex;
document.getElementById("form").innerHTML += someHtmlString;
document.getElementById("idOfSelect").options[index].selected = true;

answered Aug 20, 2011 at 16:54

Marian Galik

87610 silver badges21 bronze badges

2 Comments

bunkdeath Over a year ago

but I do have a lot of select tags. I am adding select tags dynamically. Select on one option creates another select tags related to the first selected item.

Marian Galik Over a year ago

So then, I would use jQuery to handle all of them. But it is not the best solution.

Collectives™ on Stack Overflow

dynamic adding into html element

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related