Reapply style after adding content with JavaScript

Question

I will try to expand my problem:

I have a link:

<a href="#" onClick="Display(); return false;">Display</a>

I have some styles:

<style type="text/css">
p {
 background-color: #AFA99B;
}
</style>

And the folowing js code:

function printf(MyHtml){
document.write(MyHtml); 
}

function Display(){
printf("<p>some html code<p>");
//...
}

So when the user click the link, I must add some html content to the body & the new added elements must use the styles defined. That's all.

They *should* do. You seem to have reduced your test case beyond the point where the problem is visible. Please expand it. — Quentin, Jan 24 '12 at 17:52
When are you calling this line? If you call it after the document was loaded, it will replace the whole content of the document, also the style definitions. See the difference between [this](http://jsfiddle.net/5Kqda/) and [this](http://jsfiddle.net/5Kqda/1/). — Felix Kling, Jan 24 '12 at 17:52
your question is wrong. check your code you are doing some kind of mistake — Prateek Sharma, Jan 24 '12 at 18:04

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

That's the problem was talking about in my comment. You are calling document.write(MyHtml) after the document was fully loaded.

It will completely replace the document (see the documentation). Inspect it, you will see that there is an empty head (also see this and this example).

Use other methods to manipulate the DOM.

edited May 23 '17 at 12:06

Community

1
1

answered Jan 24 '12 at 18:35

Felix Kling

795,719
175
1,089
1,143

Reapply style after adding content with JavaScript

1 Answers1

Linked