How to add css styles to document.write in javascript

Question

Hello I'm very new to javascript and doing my first steps I was wondering if I could style the content of a variable in the document.write instruction and I came to this.

    <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .style1{
            background-color: chartreuse;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name1;
        name1=prompt("Write your name");
        document.write('<p class="style1">'+name1+'</p>');
    </script>
</body>
</html>

I got that solved by reviewing some posts here the question is how does this actually work?

document.write('<p class="style1">'+name1+'</p>');

I'm not sure I understand why I need to put ' for this instruction could somebody explain that please thank you btw I'm sorry this is a very basic question but I would like to know also if you guys have some more ways to style a document.write it would be nice to know .

Please have a good understanding how CSS/Style works. Please go through developer.mozilla.org/en-US/docs/Web/CSS. — Asutosh
– Asutosh, Commented Aug 2, 2020 at 3:39
The single quote char is there so that the double quotes don't need to be escaped. Technically you dont need the single quote chars as you infer. You could use double quotes on the outside, but all your inside double quotes will need to be escaped as in \" — GetSet
– GetSet, Commented Aug 2, 2020 at 3:45

sonEtLumiere · Accepted Answer · 2020-08-02 09:40:13Z

1

I'd suggest taking a slightly different approach. You can add a div to your HTML with an ID of "test" (or whatever you'd like), then edit the innerHTML of that div like so:

document.getElementById("test").innerHTML = name1;

edited Aug 2, 2020 at 9:40

sonEtLumiere

4,6223 gold badges15 silver badges48 bronze badges

answered Aug 2, 2020 at 3:49

Richard

263 bronze badges

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

Comments

ridoansaleh · Accepted Answer · 2020-08-02 03:58:35Z

0

document.write : Write HTML elements with text directly to the HTML document

 var name1;
 name1=prompt("Write your name");
 document.write('<p class="style1">'+name1+'</p>');

Create a variable named name1
Give a value to name1 variable from user input in prompt alert
Write p element with class style1 and its content is value from name1 to HTML document

answered Aug 2, 2020 at 3:58

ridoansaleh

6099 silver badges20 bronze badges

Comments

General Grievance · Accepted Answer · 2021-12-13 15:49:28Z

0

document.write(); is writing a text in your HTML File. so if you write like this:

<script>document.write("<p>blah</p>");</script>

then you are writing html Source like <p>blah</p>.

edited Dec 13, 2021 at 15:49

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Aug 2, 2020 at 3:41

dripis

531 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to add css styles to document.write in javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related