×
Vytvárame riešenia

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
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších