How to build up a list with html tags in a javascript function

Question

I have written code to display the date (month, day, day nr, and year) with javascript and placed it in a ul.

my question is how to build up a li with html tags (so that i can place breaks) in a javascript function because now if i would for example do the following

var output = "<li>" + month_full[monthFull] + "<br/>" +  weekDay[day] + "</li>";
return output;

it will output exactly how its shown -> http://gyazo.com/5a67f3dbd7db07254bd38d58116aac7c

you can horizontally scroll through my months. now i would like to build it up like so: http://gyazo.com/adb760c912691a7ce26b1cc40d89d1df

to check my jsfiddle to see what i have now: https://jsfiddle.net/GY22/vqfk8yLL/2/

my javascript code is the following:

<script>
// Get today's current date.
var now = new Date();
console.log(now);

// Calculates the number of the week
var weekNumber = ((now.getDate()<10) ? "0" : "")+ now.getDate();
console.log("The current week number is: " + weekNumber);

// Array list of months.
var month_full = new Array(12);
month_full[0] = "January";
month_full[1] = "February";
month_full[2] = "March";
month_full[3] = "April";
month_full[4] = "May";
month_full[5] = "June";
month_full[6] = "July";
month_full[7] = "August";
month_full[8] = "September";
month_full[9] = "October";
month_full[10] = "November";
month_full[11] = "December";
//console.log(month[3]);

var weekDay = new Array(7);
weekDay[0]=  "Su";
weekDay[1] = "Mo";
weekDay[2] = "Tu";
weekDay[3] = "We";
weekDay[4] = "Th";
weekDay[5] = "Fr";
weekDay[6] = "Sa";

function weekNr_Month(date){
    var month = date.getUTCMonth(); 
    return month[month];
}

function formatDate(date) {
    var month = date.getUTCMonth() +1;
    var dayNumber = date.getUTCDate();
    var year = date.getUTCFullYear();
    var day = date.getUTCDay();
    var monthFull = date.getUTCMonth(); 

    return month_full[monthFull] + " " +  weekDay[day] + ": " + dayNumber + "-" + month + "-" + year + ";  ";
}
console.log(formatDate(new Date()));

var today

function addListItem(){
    var createListItem = document.createElement("li");
    var outputListItem = document.createTextNode(today);

    createListItem.appendChild(outputListItem);
    var createUl = document.getElementsByTagName("ul");
    createUl[0].appendChild(createListItem);
}

// loop starting from may up untill for months from the set date
for (var i = 1; i < 122; i++){
    today = formatDate(new Date(2015, 05, i));
    //document.write(today + "<br />");
    addListItem();
}

document.getElementById('timeline').
getElementsByTagName('li')[(new Date()).getDate() + 1].className += ' currentDate';

</script>

Take a look at How to add HTML code through JavaScript after an element to know how to add your list after the <ul> tag — Anwar
– Anwar, Commented Jun 29, 2015 at 9:41
Little note, you may not want that <li></li> which is already in the ul, that may mess up your styling :-) — Andrei Cojea
– Andrei Cojea, Commented Jun 29, 2015 at 9:46

Sebastian Nette · Accepted Answer · 2015-06-29 09:41:41Z

2

That is because you are creating a text node instead of html content. Try this:

var createListItem = document.createElement("li");
    createListItem.innerHTML = today;

answered Jun 29, 2015 at 9:41

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to build up a list with html tags in a javascript function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related