如何使用javascript为p标记中的innerhtml内容换行

基本上，我正在用javascript制作一个简单的应用程序，允许您在工作日编写，然后获取当天的学校课程。当我输入日期时，它工作正常并输出p标记中的文本。那不是我的问题

我想知道我是如何使输出（类）以某种列表格式进行的。就像它不会在一条线上相邻。相反，它基本上是一行一行地使用换行符。我如何做到这一点

斯克里夫在恩达

克利克

document.getElementById（“打印”）.onclick=function（）{
var måndagLektioner=“Engelska”+“Bild”+“Språk”+“Slöjd”+“Svenska”；
var tisdagLektioner=“So”+“Språk”+“No”+“Matte”+“Musik”+“Svenska”；
var onsdagLektioner=“Matte”+“So”+“Idrott”+“Engelska”+“No”+“Elevens val”；
var torsdagLektioner=“No”+“Hemkunskap”+“So”+“Samling”+“No”+“Språk”
var fredagLektioner=“Svenska”+“Matte”+“Idrott”+“So”；
if（document.getElementById（“dag”）.value==“måndag”）{
document.getElementById（“lektioner”）.innerHTML=måndagLektioner；
}
if（document.getElementById（“dag”）.value==“tisdag”）{
document.getElementById（“lektioner”）.innerHTML=tisdagLektioner；
}
if（document.getElementById（“dag”）.value==“onsdag”）{
document.getElementById（“lektioner”）.innerHTML=onsdagLektioner；
}
if（document.getElementById（“dag”）.value==“torsdag”）{
document.getElementById（“lektioner”）.innerHTML=torsdagLektioner；
}
if（document.getElementById（“dag”）.value==“fredag”）{
document.getElementById（“lektioner”）.innerHTML=fredagLektioner；
}
}

解决方案1:使用

.split（“”）.join（“
”）

（空格）替换为

（新行）的变量后的code>。这样你就可以把每一个字都写在新的一行上

document.getElementById（“打印”）.onclick=function（）{
var måndagLektioner=“Engelska”+“Bild”+“Språk”+“Slöjd”+“Svenska”；
if（document.getElementById（“dag”）.value==“måndag”）{
document.getElementById（“lektioner”）.innerHTML=måndagLektioner.split（“”）.join（“
”）；
}
}

n dag中的Skriv

克利克

虽然另一个答案可能很有效，但我将介绍一种更正确的方法来实现您的意思

您有一个类列表，列表以数组的形式用JavaScript表示

var måndagLektioner = ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"];

然后您可以在该数组上执行操作（在其上循环，将其连接到字符串中，等等）

您还需要在文档上使用列表表示，因为我们有3个元素。作为父项的

（无序列表）和

（有序列表），以及每个列表项的

因此，让我们在数组上循环，为每个项创建一个

元素，并将其添加到列表中

// Save all of your elements in variables, don't call getElementById
// more than once for the same element.
var print = document.getElementById("print");
var dag = document.getElementById("dag");
var lektioner = document.getElementById("lektioner");

// Use addEventListener, not onclick.
// This way you can have multiple event handlers on the same element.
print.addEventListener('click', function () {

    // Let's create an object. We can access a specific lesson array with
    // lessons["tisdagLektioner"] (for example)
    var lessons = {
        "måndagLektioner": ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"],
        "tisdagLektioner": ["So", "Språk", "No" + " Matte" + " Musik", "Svenska"],
        "onsdagLektioner": ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"],
        "torsdagLektioner": ["No", "Hemkunskap", "So", "Samling", "No", "Språk"],
        "fredagLektioner": ["Svenska", "Matte", "Idrott", "So"]
    }

    // There are better ways to clear an element. But let's stick with the basics.
    lektioner.innerHTML = '';

    // if you wrote an entry in dag that's in our object
    if (lessons[dag.value]) {
        // Iterate that array.
        lessons[dag.value].forEach(function(lesson) {
            // Inside this function, item in the array is called "lesson".

            // Create an LI
            var li = document.createElement('li');
            // Make the text equal to the current lesson
            li.textContent = lesson;
            // Append to the UL.
            lektioner.appendChild(li);
        });
    }

});

---

您可以查看一下

我建议您对JavaScript进行一些修改，采用以下方法：

document.getElementById("print").onclick = function() {

  // create an object containing all the days' lessons:
  var dagar = {
    måndagLektioner: "Engelska " + "Bild " + "Språk " + "Slöjd " + "Svenska",
    tisdagLektioner: "So " + "Språk " + "No" + " Matte" + " Musik " + "Svenska",
    onsdagLektioner: "Matte " + "So" + " Idrott" + " Engelska" + " No" + " Elevens val",
    torsdagLektioner: "No " + "Hemkunskap " + "So " + "Samling " + "No " + "Språk",
    fredagLektioner: "Svenska " + "Matte " + "Idrott " + "So"
  },
      // get the value once, not repeatedly, using trim()
      // to remove leading, and trailing white-space,
      // convert to lower case to account for capitalisation
      // differences:
      value = document.getElementById('dag').value.trim().toLowerCase();

  // set the elements innerHTML to the value returned from the
  // created object, replacing the found white-space sequences
  // with <br />:
  document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].replace(/\s+/g,'<br />');

}

document.getElementById（“打印”）.onclick=function（）{
//创建包含所有课程的对象：
var dagar={
måndagLektioner：“Engelska”+“Bild”+“Språk”+“Slöjd”+“Svenska”，
tisdagLektioner：“所以”+“斯普雷克”+“不”+“哑光”+“音乐”+“斯文斯卡”，
onsdagLektioner:“无光”+“因此”+“伊德洛特”+“恩格尔斯卡”+“不”+“埃列文斯瓦尔”，
托斯达格勒克提奥尼尔：“不”+“Hemkunskap”+“So”+“Samling”+“不”+“Språk”，
fredagLektioner：“Svenska”+“Matte”+“Idrott”+“So”
},
//使用trim（）获取值一次，而不是重复
//要删除前导空格和尾随空格，
//转换为小写以说明资本化
//差异：
value=document.getElementById（'dag'）.value.trim（）.toLowerCase（）；
//将innerHTML元素设置为从
//已创建对象，替换找到的空白序列
//使用
：
document.getElementById（'lektioner'）。innerHTML=dagar[value+'lektioner']。替换（/\s+/g，“
”）；
}

document.getElementById（“打印”）.onclick=function（）{
var dagar={
måndagLektioner：“Engelska”+“Bild”+“Språk”+“Slöjd”+“Svenska”，
tisdagLektioner：“所以”+“斯普雷克”+“不”+“哑光”+“音乐”+“斯文斯卡”，
onsdagLektioner:“无光”+“因此”+“伊德洛特”+“恩格尔斯卡”+“不”+“埃列文斯瓦尔”，
托斯达格勒克提奥尼尔：“不”+“Hemkunskap”+“So”+“Samling”+“不”+“Språk”，
fredagLektioner：“Svenska”+“Matte”+“Idrott”+“So”
},
value=document.getElementById（'dag'）.value.trim（）.toLowerCase（）；
document.getElementById（'lektioner'）。innerHTML=dagar[value+'lektioner']。替换（/\s+/g，“
”）；
}

n dag中的Skriv

克利克

你知道标签吗？虽然看起来你需要一个表格或列表而不是段落。如果它是一个列表，不要使用

标记，使用

（如果无序）或

（如果有序）和
作为列表项。@SecondRikudo我如何将innerhtml与结合使用？正如你所想的那样。尽管如此，您不应该真正开始使用
.innerHTML
。看看
document.createElement
和
node.appendChild
@SecondRikudo好的，我来看看。我对javascript有点陌生，正在学习过程中，所以我只掌握了一些基本知识。