Question about child nodes of uls

I have a ul with with like 8 <li> inside

<ul id ="incomplete-tasks"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> </ul> <button> Add </button> But when i select the ul like this var incompleteTasksHolder = document.getElementById("incomplete-tasks"); And when i look at all the child elements, it has text nodes followed by li nodes, but i expect it to only have li nodes not text nodes. when i console.log it like this console.log(incompleteTasksHolder.childNodes); it has: 0: text 1: li 2: text 3: li 4: text 5: li 6: text 7: li 8: text 9: li 10: text 11: li1 2: text 13: li1 4: text 15: li1 6: text why does this happen?