如何在 JavaScript 中添加换行符？

Question

我需要使用 javascript 向网页添加文本，所以我按如下方式完成了

// Create name as h1
var h = document.createElement('h1');
var t = document.createTextNode('Austin Chandler');
h.appendChild(t);
document.body.appendChild(h);

// Formatting h1 tag
document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.fontFamily = 'Tahoma';
document.querySelector('h1').style.textAlign = 'center';

// Line break
document.write('\n');

// Create course and section number as h2
var h_2 = document.createElement('h2');
var t_2 = document.createTextNode('WEB 115 - Section 0001');
h.appendChild(t_2);
document.body.appendChild(h_2);

// Formatting h2 tag
document.querySelector('h2').style.color = 'red';
document.querySelector('h2').style.fontFamily = 'Garamond';
document.querySelector('h2').style.fontStyle = 'italics';
document.querySelector('h2').style.textAlign = 'center';

document.write('\n'); 只在我的文本 "Austin Chandler" 和 "WEB 115 - Section 0001" 之间添加一个小的 space 而不是换行符。

输出应如下所示：
奥斯汀·钱德勒
WEB 115 - 第 0001 节

当前输出如下所示：
奥斯汀钱德勒 WEB 115 - 第 0001 节

如何添加换行符？

Answer 1

在HTML中，换行符是<br>，因为你的Javascript写的是HTML，你需要使用<br>.

此外，所有文本都在 h1 中，因为您将第二个文本添加到了错误的元素中。见下文。

// Create name as h1
var h = document.createElement('h1');
var t = document.createTextNode('Austin Chandler');
h.appendChild(t);
document.body.appendChild(h);

// Formatting h1 tag
document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.fontFamily = 'Tahoma';
document.querySelector('h1').style.textAlign = 'center';

// Line break
document.write('<br>');

// Create course and section number as h2
var h_2 = document.createElement('h2');
var t_2 = document.createTextNode('WEB 115 - Section 0001');
   // you were adding the second text to the first element
h_2.appendChild(t_2);
document.body.appendChild(h_2);

// Formatting h2 tag
document.querySelector('h2').style.color = 'red';
document.querySelector('h2').style.fontFamily = 'Garamond';
document.querySelector('h2').style.fontStyle = 'italics';
document.querySelector('h2').style.textAlign = 'center';

Answer 2

尝试添加 <br>。它将添加一个中断

Answer 3

这对我有用：

<script>
    document.write ('line1');
    document.write ('<br />');
    document.write ('line2');
</script>

Answer 4

使用document.body.appendChild(document.createElement("br"));代替\n

而且，您正在将所有文本添加到 h1。您想要 h2 元素中的第二个文本：

// Create name as h1
var h = document.createElement('h1');
var t = document.createTextNode('Austin Chandler');
h.appendChild(t);
document.body.appendChild(h);

// Formatting h1 tag
document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.fontFamily = 'Tahoma';
document.querySelector('h1').style.textAlign = 'center';

// Line break
document.body.appendChild(document.createElement("br"));

// Create course and section number as h2
var h_2 = document.createElement('h2');
var t_2 = document.createTextNode('WEB 115 - Section 0001');

// here change h to h2:
h_2.appendChild(t_2);


document.body.appendChild(h_2);

// Formatting h2 tag
document.querySelector('h2').style.color = 'red';
document.querySelector('h2').style.fontFamily = 'Garamond';
document.querySelector('h2').style.fontStyle = 'italics';
document.querySelector('h2').style.textAlign = 'center';

如何在 JavaScript 中添加换行符？

How to add a line break in JavaScript?

javascript

line-breaks