자바스크립트 appendChild 에러가 발생합니다.

Question

자바스크립트 appendChild 에러가 발생합니다.

조회수 15455회

javascript

xml

0

싫어요

<ul> 태그안에 <li> 태그로 XML 노드의 값을 추가 하고싶습니다. xmlDoc.documentElement.childNodes; 코드로 루트 노드(<person>)의 자식노드(<name>, <address>, <phone>)를 찾은 뒤, 반복문으로 <li> 태그를 생성하고 각각 자식노드 값(x[i].childNodes[0].nodeValue;)들을 넣어 줬습니다. 그리고 ul.appendChild(li); 코드로 <ul> 태그안에 추가를 하려고 하는데 에러가 발생합니다.

console.log(x[i].childNodes[0].nodeValue); 코드로 값이 정확한지 확인해보니 각 노드 값들이 정확하게 지정되어 있었습니다. 뭐가 문제인지 조언 부탁드립니다.

Uncaught TypeError: Cannot read property 'appendChild' of null

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var text="<person>";
        text +=  "<name>name1</name>";
        text +=  "<address>address1</address>";
        text +=  "<phone>phone1</phone>";
        text +=  "</person>";

        if (window.DOMParser)
        {
            parser=new DOMParser();
            xmlDoc=parser.parseFromString(text,"text/xml");
        }
        else // 인터넷 익스플로러
        {
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async=false;
            xmlDoc.loadXML(text); 
        } 

        x=xmlDoc.documentElement.childNodes;

        var ul = document.getElementById("u");

        for(var i in x){
            var li = document.createElement("li");
            li.innerHTML = x[i].childNodes[0].nodeValue;
            console.log(x[i].childNodes[0].nodeValue);
            ul.appendChild(li);
        }
    </script>
</head>
<body>
    <ul id="u">
    </ul>
</body>
</html>

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 2 · Accepted Answer

돌려보니 ul이 undefined로 나오는데요.

원인은 스크립트가 실행되는 시점에 아직 <ul>태그를 브라우저가 읽지 않았기 때문입니다. 정확하게는 <ul>태그를 랜더링 하면서 DOM 객체로 생성하기 전에 스크립트가 실행되었기 때문이죠.

아래처럼 스크립트가 <ul>보다 아래에 위치하도록 해보세요. 혹은 window.onload를 활용하는 방법도 있습니다.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="u"></ul>
<script type="text/javascript">
    // 이 스크립트가 HTML 로드가 끝난 후 실행되도록 하세요
    var text = "<person>";
    text += "<name>name1</name>";
    text += "<address>address1</address>";
    text += "<phone>phone1</phone>";
    text += "</person>";

    if (window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(text, "text/xml");
    } else // 인터넷 익스플로러
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(text);
    }

    x = xmlDoc.documentElement.childNodes;

    var ul = document.getElementById("u");

    for ( var i in x) {
        var li = document.createElement("li");
        li.innerHTML = x[i].childNodes[0].nodeValue;
        console.log(x[i].childNodes[0].nodeValue);
        ul.appendChild(li);
    }
</script>
</body>
</html>