JavaScript's document.write doesn't work like PHP's echo

Question

I'm trying to get JavaScript's document.write to work like PHP's echo. For example:

<?php

echo "
<style>
div {
border: 1px solid black;
}
<style>
";

?>

<div> Hello </div>

would work just fine in PHP, and it'll make a border of 1px solid black around the div. However in JavaScript:

<script>

document.write("
<style>
div {
border: 1px solid red;
}
<style>
");

</script>

<div> Hello </div>

it wouldn't work, and it doesn't make a border of 1px solid black around the div. I'm wondering if it's even possible to do the same thing with JavaScript, and if so what am I doing wrong and how to fix it.

I can't possibly see having a div inside PHP without echoing would work. — Funk Forty Niner, Aug 03 '15 at 21:45
@Fred-ii- Not inside PHP. Outside of PHP, the styles tags inside of scripts, and the div outside of the scripts. — frosty, Aug 03 '15 at 21:46
Not sure but I think javascript happens after page load so style would not be updated — Sayed, Aug 03 '15 at 21:47
[document.write is a bad practice](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — Jay Blanchard, Aug 03 '15 at 21:48
@phplover There must be a way to update styles with javascript. — frosty, Aug 03 '15 at 21:48
You would use unobtrusive JS e.g., `document.getElementById("p2").style.color = "blue";` — Jay Blanchard, Aug 03 '15 at 21:52
possible duplicate of [PHP code inside a Javascript's "document.write()"](http://stackoverflow.com/questions/11938805/php-code-inside-a-javascripts-document-write) — ivan, Aug 03 '15 at 21:52
curious though; why would you want to do this in JS? I hope you have a Plan-B, for if a user has JS disabled; a guy like me for instance who doesn't let JS be on by default. — Funk Forty Niner, Aug 03 '15 at 21:53
Was trying to use it to get the screen width of the user, and depending on that I was going to adjust the width of my website. — frosty, Aug 03 '15 at 21:55
In this day and age *most* user's have JS turned on. Having said that, you do not need JS for screen width things. Use CSS [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). This should be Plan A @frosty — Jay Blanchard, Aug 03 '15 at 21:57
@Fred-ii- If you have a plan B though, just in case, I'm all ears. — frosty, Aug 03 '15 at 21:57
*"Was trying to use it to get the screen width of the user, and depending on that I was going to adjust the width of my website."* - I just read your other comment now. Man... use bootstrap if you can, or Google responsive html — Funk Forty Niner, Aug 03 '15 at 22:05

score 3 · Accepted Answer · answered Aug 03 '15 at 21:50

3

I see two errors in your javascript code. The first, You can't use new lines in your code. It needs to be all over one line or concatenated by ending the string then using a + on the next line.

You also aren't closing your style tag, which was disrupting the final output.

The following code works for me:

<script type="text/javascript">

document.write("<style>div {border: 1px solid red;}</style>");

</script>

<div> Hello </div>

Or, as mentioned above with the string concatenation:

<script>

document.write(
    "<style>"
    +"div {"
    +"border: 1px solid red;"
    +"}"
    +"</style>"
);

</script>

<div> Hello </div>

answered Aug 03 '15 at 21:50

Samuel Cook

15,511
6
43
58

It has to be all on the same line or concatenated? Man, JavaScript makes it a lot less easier to use with that one. – frosty Aug 03 '15 at 21:53
JavaScript is a lot more strict than PHP and I'd consider it to be pretty flexible – Samuel Cook Aug 03 '15 at 21:54

score 2 · Answer 2 · answered Aug 03 '15 at 22:00

Just create the styleless div like this:

<div id="box1"></div>

And then you can manipulate the styling with js like this:

document.getElementById('box1').style.cssText = 'background-color:black;height:50px;';

With jQuery, it's even easier:

HTML:

<div id="box1"></div>

jQuery:

$("#box1").css("background-color", "black");

JavaScript's document.write doesn't work like PHP's echo

2 Answers2