Question

In JavaScript, is there a way to make content appear on the next line in a list without creating a new list item?

Answer 1

For more information I have two variables. title and description. I have a list and I want each title and description to be one list item, but I want the description to appear on the next line. \n does not seem to work.

Answer 2

if you mock up a little html it would be easier to see what you are trying to explain :)

Answer 3

\n doesn't work here
but try t use <li> tag in the html page
and when you press or hover on that item let it display the description.
try similar to this

document.getElementById("demo").innerHTML=Date();

Answer 4

You're probably going to want to put some more html markup in your list-item.

e.g.:
<li><div>title</div><div>description</div></li>

depending on your doctype and the like, it may not be 'proper' form to put block level elements (<div>) inside an inline element (<li>), so you can make the <div>s <spans> and use css to display them as block level, ie:

li span { display: block; }

Answer 5

Okay, still can't get ti to work. Here is the entire function:
function listEvents(feedRoot) {
var entries = feedRoot.feed.getEntries();
var eventDiv = document.getElementById('eventsLoaded');
if (eventDiv.childNodes.length > 0) {
eventDiv.removeChild(eventDiv.childNodes[0]);
}
/* create a new unordered list */
var ul = document.createElement('ul');
/* set the calendarTitle div with the name of the calendar */
document.getElementById('calendarTitle').innerHTML =
"Calendar: " + feedRoot.feed.title.$t;
/* loop through each event in the feed */
var len = entries.length;
for (var i = 0; i < len; i++) {
var entry = entries[i];
var title = entry.getTitle().getText();
var content = entry.getContent().getText();
var startDateTime = null;
var startJSDate = null;
var times = entry.getTimes();
if (times.length > 0) {
startDateTime = times[0].getStartTime();
startJSDate = startDateTime.getDate();
}
var entryLinkHref = null;
var todaysDate = new Date();
if (entry.getHtmlLink() != null) {
if (startJSDate.getMonth() +1 == todaysDate.getMonth() + 1 && startJSDate.getDate() == todaysDate.getDate() + 1){
entryLinkHref = entry.getHtmlLink().getHref();
}
}
var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate() + " - ";
if (!startDateTime.isDateOnly()) {
if (startJSDate.getHours() > 12) {
dateString += " " + startJSDate.getHours() - 12 + ":" +
padNumber(startJSDate.getMinutes());
}else {
dateString += " " + startJSDate.getHours() + ":" +
padNumber(startJSDate.getMinutes());
}
}
var li = document.createElement('li');

/* if we have a link to the event, create an 'a' element */
if (entryLinkHref != null) {
entryLink = document.createElement('a');
entryLink.setAttribute('href', entryLinkHref);
entryLink.appendChild(document.createTextNode(title));
li.appendChild(entryLink);
li.appendChild(document.createTextNode(' - ' + dateString + 'Description goes here, but on the next line.'));
} else {
li.appendChild(document.createTextNode(title + ' - ' + dateString));
}

/* append the list item onto the unordered list */
if (startJSDate.getMonth() +1 == todaysDate.getMonth() + 1 && startJSDate.getDate() == todaysDate.getDate() + 1){
//alert (title);
ul.appendChild(li);
}
}
eventDiv.appendChild(ul);
}

Answer 6

Rather than document.createTextNode, createElement('div') and append to that a textNode with the text.