Javascript-форум - Не работает вставка в DOM

Всех приветствую. Заранее благодарю. Мучаюсь с insertBefore. Синтаксис сложноватый, но из того, что я нашел, делаю все как надо. Подскажите, пожалуйста, в чем ошибка. Собственно, не могу вставить созданный элемент в желаемое место.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Считалочка</title>
    </head>
<body>
    <div id="position"><ul>Счет
        <li>Один</li>
        <li class="three">Три</li>
        <li>Четыре</li>
        <li>Пять</li>
    </ul>
    </div>
</body>
</html>

function adding(){
    var position = document.querySelector("#position");
    var three = document.querySelector(".three");
    var li = document.createElement("li");
    var text = document.createTextNode("Два");
    li.appendChild(text);
    position.insertBefore(li, three);
    }
 adding()

п.с. названия атрибутов, смысл текста - все это не принципиально и выбрано из воздуха. С пониманием appendChild проблем не было, а тут прямо завис на несколько часов...