Cannot read property 'insertBefore' of null

Question

最近开始学习js，现在遇到了一个人问题 关于insetBefore使用的，在貂蝉前面添加陈圆圆
<ul id="ulid1">
<li id="li1">西施</li>
<li id="li2">王昭君</li>
<li id="li3">貂蝉</li>
<li id="li4">杨玉环</li>
</ul><input type="button" value="insert" onclick="insert1();">
<script type="text/javascript">
//在貂蝉之前添加陈圆圆
function insert1()
{
var li3=document.getElementById("li3");
var li5=document.createElement("li");
var text5=document.createTextNode("陈圆圆");
li5.appendChild(text5);
alert(li5.value);
var ul2=document.getElementById("ulid");
ul2.insertBefore(li5,li3);
}
</script>
求大神看看怎么回事

Answer 1

var ul2=document.getElementById("ulid1");这里id写错了<ul id="ulid1">
    <li id="li1">西施</li>
    <li id="li2">王昭君</li>
    <li id="li3">貂蝉</li>
    <li id="li4">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();">
    <script type="text/javascript">
        //在貂蝉之前添加陈圆圆
        function insert1()
        {
            var li3=document.getElementById("li3");
            var li5=document.createElement("li");
            var text5=document.createTextNode("陈圆圆");
            li5.appendChild(text5);
            alert(li5.value);
            var ul2=document.getElementById("ulid1");
            ul2.insertBefore(li5,li3);
 
 
        }
    </script>

Answer 2

<ul id="ulid1">
    <li id="li1">西施</li>
    <li id="li2">王昭君</li>
    <li id="li3">貂蝉</li>
    <li id="li4">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();">
    <script type="text/javascript">
        //在貂蝉之前添加陈圆圆
        function insert1()
        {
            var li3=document.getElementById("li3");
            var li5=document.createElement("li");
            var text5=document.createTextNode("陈圆圆");
            li5.appendChild(text5);
            alert(li5.value);
            var ul2=document.getElementById("ulid1");//Id少了一个1
            ul2.insertBefore(li5,li3);
 
 
        }
    </script>