How do I use the first child of a list with createTextNode()

Question

I'm trying to use js to print the first child of my list using createTextNode() and create an h1. I want my sentence to read "Blue? Great Colour." However, my sentence is reading [object] [object]? Great Colour. How do I correctly use the first child of my list? https://jsfiddle.net/6x9a6rqv/

html:

<div class="list">
  <ul>
    <li><a href="#">Blue</a></li>
    <li><a href="#">Red</a></li>
    <li><a href="#">Green</a></li>
  </ul>
</div>

css:

.list li:first-child {
  font-size: 30px;
}

JS:

var colour = $('.list li:first-child')

var headerone = document.createElement("H1");
var t = document.createTextNode(colour + '? Great Colour.');
headerone.appendChild(t);
document.body.appendChild(headerone);

Any help would be appreciated :)

Answer 1

In colour variable you have a reference to the DOM object. To get its text, use text() method:

document.createTextNode(colour.text() + '? Great Colour.')