如何在 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”之間添加了一個小空格，而不是換行符。

Output 應如下所示：
奧斯汀錢德勒
WEB 115 - 第 0001 節

當前的 output 看起來像這樣：
奧斯汀錢德勒 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

使用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';

Answer 4

這對我有用：

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