在JS中如何创建新行

Question

你好，我有这段JS代码：

  function myFunction() {
  var g; 

var d = new Date().getDay();
switch (d) {
    case 0:
        g = "Today it's Sunday";
        break;
    case 1:
        g = "Today it's Monday";
        break;
    case 2:
        g = "Today it's Tuesday";
        break;
    case 3:
        g = "Today it's Wednesday";
        break;
    case 4:
        g = "Today it's Thursday";
        break;
    case 5:
        g = "Today it's Friday";
        break;
    case 6:
        g = "Today it's Saturday";
        break;
    default:
        x = "Looking forward to the Weekend";
}


var y; //popup

var name = prompt("Please enter your name", " (your name is here)");

if (name != null) {
    y = 'How are you today?';
    document.getElementById("popup").innerHTML = y; //
}
var x = ""; //שעה
var time = new Date().getHours();
if (time < 12)  //תנאי
{
    x = "Have a beautiful morning " + name + '! ';
}
else if (time < 16) {
    x = "Great noon! Enjoy this day " + name + '!';
}
else if (time < 19) {
    x = "Great afternoon! Enjoy them " + name + '!';
}
else if (time < 23) {
    x = "Good evening! have some fun and take some rest befor the day over" + name + '!';
}

document.getElementById("demo").innerText = x + "<br/>" + g; 
}

为什么我加入<br>标签后，屏幕上只显示这个标签而没有换行呢？我还尝试使用"\n"来换行，但也不起作用。为什么会这样呢？

- Nave Tseva

Answer 1

你需要设置 innerHTML 而不是 innerText。但是要注意不同类型的安全攻击，并 清理 用户提供的文本（即 name）。

- Alexander Pavlov

---

它有效...但下次该怎么在这个脚本中添加"\n"（换行符）？innerText和innerHTML有什么区别？ - undefined

设置innerText基本上是设置元素的经过处理的文本内容。例如，如果你写element.innerText = "<script>"，你将在元素内看到确切的<script>（它的innerText为<script>或类似的内容），而将innerHTML设置为相同的值将导致一个破碎的DOM树（非闭合的<script>元素）。因此，除非元素保留格式（例如<pre>），否则无法在innerText中设置纯粹的换行符。对于这种情况，使用纯粹的"\n"即可。 - undefined

Answer 2

您正在设置innerText，这只会设置元素的文本。 请尝试：

document.getElementById("demo").innerHTML = x + "<br/>" + g;  

- lebhero

---

innerText和innerHTML之间有什么区别？ - undefined

innerText只会设置文本（处理你写入元素的字符串，只是一个文本，并将<br/>替换为类似于>br/>的内容）在你定义的元素中。 innerHTML将处理你写入元素的字符串作为HTML而不仅仅是普通文本。 - undefined

所以，为什么当我加入这行代码时它不起作用呢？document.getElementById("demo").innerHTML = x+/n +g; - undefined

x+/n+g; ??? 不是有效的HTML代码！！！ 在设置innerHTML时，您需要设置HTML代码。 - undefined

Answer 3

要使<br/>标签成为一个元素，您需要设置innerHTML而不是innerText。 \n方法也可以使用。只是，空格通常不会出现在布局中。如果将#demo元素的CSS样式设置为white-space:pre-wrap;，换行符将显示出来。

- Bergi

---

所以为什么当我加入这行代码时它不起作用呢？document.getElementById("demo").innerHTML = x +/n +g;谢谢。 - undefined

你想要 …innerText = x + "\n" + g;（innerHTML 也可以使用，但在这里不需要） - undefined