HTML code injection using Javascript

Question

I have a simple html snippet that I add to the document during runtime. I am using jQuery's selectors but that should irrelevant to the issue I am facing.

When using: $("#elementID").html()

The code is displayed but with no CSS applied. The behaviour make sense since the CSS has already been loaded and applied.

My questions are: - Is there away to "refresh" a DOM element in order to re-apply CSS on it after its html content has been changed? - or is there a way to apply CSS on the code I have in the JavaScript before adding it to the DOM element?

I am aware of various JS\html templates library but at this stage I am trying to minimize the dependency on extra libraries, specially since that the snippets I am generating\injecting are very simple and I dont mind them staying in the JS code

Jamil

no it does not make sense, css rules are applied "on runtime" (css does not change how to browser displays html, its defined by it) — Hannes
– Hannes, Commented Jan 9, 2012 at 11:16

freakish · Accepted Answer · 2012-01-09 11:19:27Z

1

You are wrong. CSS is applied all the time (during runtime) - look at this jsFiddle example. You messed up with something else.

answered Jan 9, 2012 at 11:19

freakish

57k12 gold badges141 silver badges181 bronze badges

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

3 Comments

Jamil Over a year ago

I am simple appending the html content to a DOM element. Using the following: $("#<elementID>").html(<htmlcontent>); The HTML content contains jQuery markup but still the displayer output is not picking up the jQuery styles. Would it make a difference if I created a DOM element and appended it to one of the elements existing in the page instead of injecting HTML ?

Jamil Over a year ago

I have tried jsFiddle and still getting the incorrect rendering. Can you have a look at the code I am trying to render. In jsFiddle: $('div#new').html('<form><div id=\"radio\"><input type=\"radio\" id=\"radio1\" name=\"radio\" /><label for=\"radio1\">Choice 1</label><input type=\"radio\" id=\"radio2\" name=\"radio\" /><label for=\"radio2\">Choice 2</label><input type=\"radio\" id=\"radio3\" name=\"radio\" /><label for=\"radio3\">Choice 3</label></div></form>');

Jamil Over a year ago

Ok it seems that the problem I am facing is jQuery related rather than CSS\Javascipt. I am closing this question and starting a new one with the jQuery problem

EPLKleijntjens · Accepted Answer · 2012-01-09 11:20:00Z

0

Are you sure css is not applied? Because it should be. If you add a new element to the DOM, it should just take on the styling from any css files you have loaded. How are you applying the css?

answered Jan 9, 2012 at 11:20

EPLKleijntjens

9361 gold badge8 silver badges21 bronze badges

2 Comments

Jamil Over a year ago

I am not trying to apply the CSS. I am inject the html into one of the existing DOM elements . This injected code is displayed but doesn't pick up any of the CSS properties that it should. I tried testing the generated html code in a separate page by hardcoding it in the html and it picks up all the CSS operties. The problem only happens when I inject the html code dynamically using: $("#<elementID>").html(<htmlcontent>)

Jamil Over a year ago

Ok it seems that the problem I am facing is jQuery related rather than CSS\Javascipt. I am closing this question and starting a new one with the jQuery problem

krock · Accepted Answer · 2012-11-19 11:16:09Z

0

.trigger('create') on the element will force a re-rendering of the element if needed

edited Nov 19, 2012 at 11:16

krock

29.7k13 gold badges81 silver badges86 bronze badges

answered Feb 3, 2012 at 11:22

Jamil

6711 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

HTML code injection using Javascript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related