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-0001节”之间添加一个小空格，而不是换行。

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

当前输出如下：
奥斯汀·钱德勒（Austin Chandler）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>

如何在JavaScript中添加换行符？

4 个答案: