如何使用javascript对ap标签中的innerhtml内容进行换行

Question

Basically I'm making a simple application in javascript that allows you to write in a weekday and then get the school classes that you have for that day. 基本上，我正在用javascript开发一个简单的应用程序，该应用程序使您可以在工作日内编写内容，然后获得当天的学校课程。 It works fine and outputs the text in the p tag when I enter the day. 当我输入日期时，它可以正常工作并在p标记中输出文本。 That's not my problem. 那不是我的问题。

I'd like to know how I make the output (the classes) go in a list format sort of. 我想知道如何使输出（类）以列表格式进行排序。 Like it doesnt go next to eachother on one line. 就像它不会在一行上彼此相邻。 Instead it goes line by line with linebreaks basically. 相反，它基本上与换行符逐行。 How do I make that happen? 我如何做到这一点？

 <body> <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p> <script type="text/javascript"> document.getElementById("print").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; } } </script> </body>

Answer 1

Solution 1: Use .split(' ').join(' '); 解决方案1：使用.split(' ').join(' '); after variables to replace 替换后的变量 (space) with   (new line). （空格）和  （换行）。 This way you will have every word on a new line. 这样，您将使每个单词都换行。

 document.getElementById("print").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('<br />'); } }

  <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>

Solution 2: Also, you can add a special character to make a difference between multiple words on same line, let's say we use | 解决方案2：同样，您可以添加一个特殊字符以使同一行上的多个单词有所不同，假设我们使用| to separate them. 分开他们。 You will do .split('|').join(' '); 您将执行.split('|').join(' '); like below. 像下面

 document.getElementById("print").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('<br />'); } }

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>

Solution 3 : If you want to use other tags then   you can do some functions that will surround your words by a tag. 解决方法3：如果你想使用其他标签则 你可以做一些功能将被标记环绕你的话。 The example below is for an unordered list ul and with li childs. 下面的示例适用于无序列表ul和li child。

 function insertTag(word, tag) { var result = '<' + tag + '>' + word + '</' + tag + '>'; return result; } function insertListTag(list, tag, innerTag) { var result = '<'+tag+'>'; for(var word in list) { result += insertTag(list[word], innerTag); } result += '</'+tag+'>'; return result; } document.getElementById("print").onclick = function() { var måndagLektioner = "Engelska|" + "Bild " + "Språk|" + "Slöjd|" + "Svenska"; if (document.getElementById("dag").value=="måndag") { document.getElementById("lektioner").innerHTML = insertListTag(måndagLektioner.split('|'), 'ul', 'li'); } }

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>

Answer 2

While the other answer probably works well, I'm going to present a more correct way of doing what you mean. 虽然其他答案可能效果很好，但我将提出一种更正确的方式来实现您的意思。

You have a list of classes, a list is represented in JavaScript in the form of an array. 您有一个类列表，列表在JavaScript中以数组的形式表示。

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

Then you can do things on that array (loop over it, join it into a string, etc). 然后，您可以在该数组上执行操作（在其上循环，将其连接到字符串中，等等）。

You want a list representation on your document as well, for that we have 3 elements. 您还需要文档上的列表表示形式，因为我们有3个元素。 The <ul> (unordered list) and <ol> (ordered list) as the parent, and <li> for each list item. <ul> （无序列表）和<ol> （有序列表）作为父级，每个列表项的<li> 。

So let's loop over the array, create an <li> element for each item, and add that to the list 因此，让我们遍历数组，为每个项目创建一个<li>元素，并将其添加到列表中

// 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);
        });
    }

});

You can have a look here 你可以在这里看看

Answer 3

I'd suggest amending your JavaScript somewhat, to the following approach: 我建议对您的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("print").onclick = function() { 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" }, value = document.getElementById('dag').value.trim().toLowerCase(); document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].replace(/\\s+/g,'<br />'); }

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>

Further, though, I'd suggest using arrays within the object, which allows lesson-names to contain white-spaces ( "Elevens val" , for instance): 不过，尽管如此，我还是建议在对象中使用数组，这允许课程名称包含空格（例如"Elevens val" ）：

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

  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"]
  },
      value = document.getElementById('dag').value.trim().toLowerCase();

  document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].join('<br />');

}

 document.getElementById("print").onclick = function() { 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"] }, value = document.getElementById('dag').value.trim().toLowerCase(); document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].join('<br />'); }

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>

And, frankly, since you're clearly working with an ordered list, I'd be remiss if I didn't suggest (and quite strongly) that you use an <ol> rather than a  : 而且，坦率地说，由于您显然正在使用有序列表，因此，如果我不（强烈建议）不建议您使用<ol>而不是 ，我将不予理:：

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

  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"]
    },
    value = document.getElementById('dag').value.trim().toLowerCase(),
    // create a document fragment, to contain the HTML (rather
    // than forcing a redraw every time a new element is added):
    frag = document.createDocumentFragment(),
    // creating an <li> element:
    li = document.createElement('li'),
    // a named, but uninitialised, variable to use within the loop:
    clone;

  // using Array.prototype.forEach() to iterate over the lessons array:
  dagar[value + 'Lektioner'].forEach(function(lesson) {
    // cloning the created <li> (to avoid calling
    // document.createElement() multiple times):
    clone = li.cloneNode();

    // setting the text to the string held in the current
    // array-element over which we're iterating:
    clone.textContent = lesson;

    // appending the cloned <li> to the document fragment:
    frag.appendChild(clone);
  });

  // appending the document fragment to the element with the
  // id of 'lektioner':
  document.getElementById('lektioner').appendChild(frag);

}

 document.getElementById("print").onclick = function() { 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"] }, value = document.getElementById('dag').value.trim().toLowerCase(), frag = document.createDocumentFragment(), li = document.createElement('li'), clone; dagar[value + 'Lektioner'].forEach(function(lesson) { clone = li.cloneNode(); clone.textContent = lesson; frag.appendChild(clone); }); document.getElementById('lektioner').appendChild(frag); }

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <ol id="lektioner"></ol>

Also, rather than using element.onclick I'd suggest using HTMLElement.addEventListener() to be more standards-compliant: 另外，我建议不要使用element.onclick来更符合标准： HTMLElement.addEventListener()

function showDay() {

  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"]
    },
    value = document.getElementById('dag').value.trim().toLowerCase(),
    frag = document.createDocumentFragment(),
    li = document.createElement('li'),
    clone;

  dagar[value + 'Lektioner'].forEach(function(lesson) {
    clone = li.cloneNode();
    clone.textContent = lesson;
    frag.appendChild(clone);
  });

  document.getElementById('lektioner').appendChild(frag);

}

// getting references to the <button> and the <input />:
var button = document.getElementById('print'),
    dayInput = document.getElementById('dag');

// adding the showDay() function as the event-handler for:
// the 'click' event on the <button>:
button.addEventListener('click', showDay);
// the 'change' event on the <input />:
dag.addEventListener('change', showDay);

 function showDay() { 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"] }, value = document.getElementById('dag').value.trim().toLowerCase(), frag = document.createDocumentFragment(), li = document.createElement('li'), clone; dagar[value + 'Lektioner'].forEach(function(lesson) { clone = li.cloneNode(); clone.textContent = lesson; frag.appendChild(clone); }); document.getElementById('lektioner').appendChild(frag); } var button = document.getElementById('print'), dayInput = document.getElementById('dag'); button.addEventListener('click', showDay); dag.addEventListener('change', showDay);

 <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <ol id="lektioner"></ol>

References: 参考文献：

Array.prototype.forEach() . Array.prototype.forEach() 。
Array.prototype.join() . Array.prototype.join() 。
document.createDocumentFragment() . document.createDocumentFragment() 。
document.createElement() . document.createElement() 。
document.getElementById() . document.getElementById() 。
EventTarget.addEventListener() . EventTarget.addEventListener() 。
JavaScript Regular Expressions Guide . JavaScript正则表达式指南。
String.prototype.replace() . String.prototype.replace() 。

如何使用javascript对ap标签中的innerhtml内容进行换行

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-03-29 10:23:50

解决方案2
0 2015-03-29 10:46:21

解决方案3
0 2015-03-29 11:13:31

如何使用javascript对ap标签中的innerhtml内容进行换行

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-03-29 10:23:50

解决方案2 0 2015-03-29 10:46:21

解决方案3 0 2015-03-29 11:13:31

解决方案1
2 已采纳 2015-03-29 10:23:50

解决方案2
0 2015-03-29 10:46:21

解决方案3
0 2015-03-29 11:13:31