CODEWITHSUNDEEP
javascript
enoua5
enoua5

Reputation: 9

Using javascript to add text text to HTML DOM and insert line breaks in between

I want all the stings of this code on separate lines, but it all goes on one line. I have already tries \r and \n here are the first few lines:

 document.write("you are an explorer, entering a dragons cavern in hopes of treasure");
 document.write("be warned, the caverns are always changing");
 document.write("...");

Upvotes: 0

Views: 806

Answers (5)

m59
m59

Reputation: 43745

\r and \n are for line breaks in the document, which doesn't matter as far as what is rendered (html) unless you're within a <pre> tag or using the css property whitespace to have the document whitespace rendered. In html a line break is <br>.

While the <br> tag is sometimes useful, don't use it without reason. For example, if you want to split up two paragraghs, you would have markup like this:

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

To make a space in between them, you could use css style:

p {
  display: block;
  margin-botton: 20px;
}

In this case, you should NOT use the <br> tag like this:

<p>This is paragraph 1.</p>
<br>
<p>This is paragraph 2.</p>

Also note that document.write is a dangerous practice and is almost never necessary. Rather than using document.write, you can use javascript to create/manipulate elements like this:

var p = document.createElement('p');
p.textContent = 'This is paragraph 1.';
document.body.appendChild(p);

Upvotes: 10

zzzzBov
zzzzBov

Reputation: 179046

document.write produces HTML. Whitespace is condensed in HTML, so if you need a linebreak, you'll need to use a <br> element.

document.write("you are an explorer, entering a dragons cavern in hopes of treasure<br>");
document.write("be warned, the caverns are always changing<br>");
document.write("...<br>");

Also, you don't need to break the document.write string into multiple calls:

document.write('you are an explorer, entering a dragons cavern in hopes of treasure<br>be warned, the caverns are always changing<br>...');

Generally speaking, document.write should be discouraged because it will rewrite the entire page if called after the document is closed to writing. Typically these sorts of changes are done through DOM nodes:

document.body.innerHTML = 'you are an explorer, entering a dragons cavern in hopes of treasure<br>be warned, the caverns are always changing<br>...';

Alternatively, if you need to guarantee formatting of text, you could use a <pre> element (or CSS with white-space: pre). Preformatted text allows newlines and multiple spaces to be respected:

<pre>you are an explorer, entering a dragons cavern in hopes of treasure
be warned, the caverns are always changing
...</pre>

Upvotes: 3

Faron
Faron

Reputation: 1243

when using document.write(); you need to realize that this is HTML that it is producing, therefore, you should use <br> to create the desired result. Besides, this method is not really highly favored.

Upvotes: 0

Corey Rothwell
Corey Rothwell

Reputation: 394

You'll need to use HTML tags:

document.write("<p>you are an explorer, entering a dragons cavern in hopes of treasure</p>");
document.write("<p>be warned, the caverns are always changing</p>");
document.write("<p>...</p>");

Upvotes: 0

Allan Elder
Allan Elder

Reputation: 4094

If you must do it using document, use document.writeln instead of document.write

Upvotes: 0

Related Questions