×
Creating solutions

Ako v JavaScripte vytvoriť nový riadok

V tomto článku budem demonštrovať ako je možné do už existujúceho textu pridať nový riadok. V niektorých prípadoch totiž text nie je v štandardných elementoch a tak zápis <br> alebo vloženie textu do blokového elementu nie je účinné.
Pre tento účel je možné použiť jeden zo zápisov &#13;&#10; a \n. Pre demonštráciu vytvorenia nového riadku boli použité vlastnosti value, innerText a innerHTML. Celý test si môžete vyskúšať spustením demo súboru.
Príklad: Zápis do elementu <body>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<textarea cols="70" rows="5" id="taOutput1">
This is sentence number 1. This is sentence number 2.</textarea>
<textarea cols="70" rows="5" id="taOutput2">
This is sentence number 1. This is sentence number 2.</textarea>
<textarea cols="70" rows="5" id="taOutput3">
This is sentence number 1. This is sentence number 2.</textarea>
<textarea cols="70" rows="5" id="taOutput4">
This is sentence number 1. This is sentence number 2.</textarea>
<textarea cols="70" rows="5" id="taOutput5">
This is sentence number 1. This is sentence number 2.</textarea>
<textarea cols="70" rows="6" id="taOutput6">
This is sentence number 1. This is sentence number 2.</textarea>
<pre id="preOutput1">
This is sentence number 1. This is sentence number 2.</pre>
<pre id="preOutput2">
This is sentence number 1. This is sentence number 2.</pre>
<pre id="preOutput3">
This is sentence number 1. This is sentence number 2.</pre>
<pre id="preOutput4">
This is sentence number 1. This is sentence number 2.</pre>
Pre správne fungovanie príkladu je potrebné z elementov <textarea> a <pre> odstrániť zalomenia riadkov.
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var i = 1, interval = 1000, idta = 1, idpre = 1;
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.value = value.replace(". ", "\n");
}, i++ * interval);
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.innerText = value.replace(". ", "\n");
}, i++ * interval);
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.innerHTML = value.replace(". ", "\n");
}, i++ * interval);
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.value = value.replace(". ", "&#13;&#10;");
}, i++ * interval);
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.innerText = value.replace(". ", "&#13;&#10;");
}, i++ * interval);
setTimeout(function () {
var textarea = document.getElementById("taOutput" + idta++);
var value = textarea.value;
textarea.innerHTML = value.replace(". ", "&#13;&#10;");
}, i++ * interval);
// ==============================================================
setTimeout(function () {
var pre = document.getElementById("preOutput" + idpre++);
var value = pre.innerText;
pre.innerHTML = value.replace(". ", "&#13;&#10;");
}, i++ * interval);
setTimeout(function () {
var pre = document.getElementById("preOutput" + idpre++);
var value = pre.innerText;
pre.innerHTML = value.replace(". ", "\n");
}, i++ * interval);
setTimeout(function () {
var pre = document.getElementById("preOutput" + idpre++);
var value = pre.innerText;
pre.innerText = value.replace(". ", "&#13;&#10;");
}, i++ * interval);
setTimeout(function () {
var pre = document.getElementById("preOutput" + idpre++);
var value = pre.innerText;
pre.innerText = value.replace(". ", "\n");
}, i++ * interval);

Záver

Ako na príkladoch vidieť, zápis nového riadka ako &#13;&#10; nie vždy funguje a preto sa odporúča používať zápis \n.


JavaScript,\n,new line,text,<textarea>,<pre>,white spaces
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest