css not being applied to document.write text

javascript css document.write
hideyho picture hideyho · Jan 25, 2011 · Viewed 8.2k times · Source

I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:

<!DOCTYPE html>
<html>
<head>
    <title>TITLE GOES HERE</title>
     <link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>

<body>
     <script type="text/javascript">
        ...
        function showFolder(folder) {
            console.debug('FOLDER: '+folder.title);
            document.write('<p>'+folder.title+'<br></p>');
        }
    </script>

</body>
</html>

The CSS is simple, just for debugging:

p {
color: red;
}

I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?

Answer

Zoltan Lengyel picture Zoltan Lengyel · Jan 25, 2011

Use innerHTML. 

<div id="towrite"></div>

then you can write in it like this: 

div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More