createTextNode not keeping font style

Question

So right now im working on a list that you add stuff to dynamically. So I have this code so far, this is my javascript

$("#textBox").keypress(function(e) {
if(e.keyCode == 13)
    addToSticky();
});

function addToSticky() {
    if(count < 5){      
        var text = document.getElementById("textBox").value;
        var node = document.createElement("LI");
        var textnode = document.createTextNode(text);
        node.appendChild(textnode);
        document.getElementById("list").appendChild(node);
        count = count + 1;
    }else
        hideBox("textBox");
}

And here is my html

<a href="#" class="sticky" STYLE="text-decoration: none">
    <h2 STYLE="font-size:200%; font-weight:bold; padding-bottom:10px; margin-top: 4px"> 
                Notes 
    </h2>
    <p>                 
        <ul id="list" STYLE="padding-left: 20px">
            <li> <b>Hire this guy! </b></li>
        </ul>
        <input type="text" name="input" id="textBox">               
    </p>
</a>

And last but not least in my css I make the < a >, < li > and my < h2 > all have the font-style set to my custom font. But however when you enter what you want to add to the list it types in the custom font but when its finally added, at the appendChild, it no longer has the custom font.

Answer 1

The first element has its text wrapped inside a bold tag, the ones which are added after it don't.

If you want to make the list items bold, the best way to do this would be to use CSS to set the font-weight property of all list item elements:

li {
    font-weight : bold;
}

Answer 2

Insert the following lines

var font = document.createElement("b");
node.appendChild(font);

after

var textnode = document.createTextNode(text)

See http://jsfiddle.net/1e8zzLep/