Javascript 这孩子不工作

我尝试在弹出窗口中添加标题和hr元素， 但是当我附加这个时，弹出窗口不再附加到主体上。 我做错了什么？然而，如果我不附加标题和人力资源的弹出窗口，他显示完美

// selecteer alle elementen met de class "editHose"
var edits = document.getElementsByClassName('editHose');

// voeg eventlistener toe aan elke knop om het edit kadertje te laten verschijnen
for(i=0; i<edits.length; i++)
{

    // eventListener toevoegen aan elke knop
    edits[i].addEventListener("click", function(e) {

        e.preventDefault();

            // maak overlay aan
            var overlay = document.createElement('div');
            overlay.setAttribute('id', 'overlay');

                // append overlay to body
                document.getElementsByTagName('body')[0].appendChild(overlay);

            // maak de popup div aan
            var popup = document.createElement('div');
            popup.setAttribute('id', 'popup');
            popup.setAttribute('class', 'form-signin')

            // maak title en regenboogbalkje onder titel aan
            var title = document.createElement('h3');
            title.setAttribute('class', 'form-signin-heading');
            var line = document.createElement('hr');
            line.setAttribute('class', 'colorgraph');

                // append title en line to popup
                popup.appendChild('title');
                popup.appendChild('line');

                // append popup to body
                document.getElementsByTagName('body')[0].appendChild(popup);

    });

}

---

提前谢谢

我发现了问题所在：

            popup.appendChild('title');
            popup.appendChild('line');

应该是

            popup.appendChild(title);
            popup.appendChild(line);

---

与其使用document.getElementsByTagName'body'[0]，不如使用document.body？我对Js非常熟悉，谢谢你的提示。