[英]How do I make linebreaks for innerhtml content in a p tag using javascript
基本上,我正在用javascript开发一个简单的应用程序,该应用程序使您可以在工作日内编写内容,然后获得当天的学校课程。 当我输入日期时,它可以正常工作并在p标记中输出文本。 那不是我的问题。
我想知道如何使输出(类)以列表格式进行排序。 就像它不会在一行上彼此相邻。 相反,它基本上与换行符逐行。 我如何做到这一点?
<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>
解决方案1:使用.split(' ').join('<br />');
替换后的变量 (空格)和
<br />
(换行)。 这样,您将使每个单词都换行。
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>
解决方案2:同样,您可以添加一个特殊字符以使同一行上的多个单词有所不同,假设我们使用|
分开他们。 您将执行.split('|').join('<br />');
像下面
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>
解决方法3:如果你想使用其他标签则<br />
你可以做一些功能将被标记环绕你的话。 下面的示例适用于无序列表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>
虽然其他答案可能效果很好,但我将提出一种更正确的方式来实现您的意思。
您有一个类列表,列表在JavaScript中以数组的形式表示。
var måndagLektioner = ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"];
然后,您可以在该数组上执行操作(在其上循环,将其连接到字符串中,等等)。
您还需要文档上的列表表示形式,因为我们有3个元素。 <ul>
(无序列表)和<ol>
(有序列表)作为父级,每个列表项的<li>
。
因此,让我们遍历数组,为每个项目创建一个<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);
});
}
});
你可以在这里看看
我建议对您的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>
不过,尽管如此,我还是建议在对象中使用数组,这允许课程名称包含空格(例如"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>
而且,坦率地说,由于您显然正在使用有序列表,因此,如果我不(强烈建议)不建议您使用<ol>
而不是<p>
,我将不予理::
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>
另外,我建议不要使用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>
参考文献:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.