Javacript [ document.write ("___"); ] Shortcut to not start each line with document.write (" or some alternative

Question

In this code I want to insert some HTML and normal text in JavaScript and don't want it to always enter document.write(" in starting of each line like this:

document.write ("<Style>");
document.write ("html {height:100%}");
document.write (".header {background-color: Aliceblue}");
document.write ("</Style>");

document.write ("<Div class='header'>Website Name</div>");
document.write ("<P style='color:red'>Some text i gathered here</p>");

It'll be very helpful if someone could solve this problem or give me some alternative.

Use it only once... and within the parenthesis, use the backtiks ` instead of double quotes to have multiple lines. — Louys Patrice Bessette, Jun 04 '22 at 14:22
Not that it matters, but it will with some frameworks, native dom element tags are *always* lowercased. — mardubbles, Jun 04 '22 at 14:24
https://developer.mozilla.org/en-US/docs/Web/API/Document/write `document.write` is stronly discouraged. — Dieter Raber, Jun 04 '22 at 14:27
This line doesnt even work, as in breaks syntax `document.write ("
Website Name
");` because you use the same nested quote char. — mardubbles, Jun 04 '22 at 14:29
@DieterRaber it is strongly discouraged, than can you give me some kind of alternative or something — Ajeiqpqslsos, Jun 04 '22 at 14:32
https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write — Dieter Raber, Jun 04 '22 at 17:01

Mero · Answer 1 · 2022-06-04T14:33:21.790

1

You can write all at once using ``:

document.write(`
  <style>
    html {height:100%}
    .header {background-color: Aliceblue}"
  </style>

  <div class="header">Website Name</div>
  <p style="color:red">Some text i gathered here</p>
`)

You can create function for it and call it where you need it:

<script>
  function write(data) {
    document.write(data)
  }
</script>

...

<script>
  write("<style>");
  write("html {height:100%}");
  ...
</script>

Warning:

write tags names in lowercase:

<Style> -> wrong
<style> -> ok

Don't use same quotes inside and outside of string:

"<div class="header">Website Name</div>" -> err
"<div class='header'>Website Name</div>" -> ok

edited Jun 04 '22 at 14:33

answered Jun 04 '22 at 14:29

Mero

630
4
12

OP never explains how his/her nested same quote chars do not produce a syntax error. – mardubbles Jun 04 '22 at 14:32
I was surprised too – Mero Jun 04 '22 at 14:34
I was surprised, but then decided not to be. Debugging multiple issues here with OP. – mardubbles Jun 04 '22 at 14:36
I wrote it wrong in the question my mistake. – Ajeiqpqslsos Jun 04 '22 at 14:37
@Mero Can't we write – Ajeiqpqslsos Jun 04 '22 at 14:37
2

nope, because in some case it could lead to error or other problems, all tags names should be lowercase – Mero Jun 04 '22 at 14:39
(+1 mero) tags have to be lowercased because thats the convention. You could technically do what you want tho, they are case-insensitive. However, doesn't explain your nested same quote chars? – mardubbles Jun 04 '22 at 14:40
you really don't like same quotes nesting, aren't you ?) – Mero Jun 04 '22 at 14:49

Javacript [ document.write ("___"); ] Shortcut to not start each line with document.write (" or some alternative

1 Answers1