TypeError：Node.appendChild的参数1没有实现接口节点

Question

嗨。我是面向对象的JavaScript的新手，我无法弄清楚接口节点是什么？ 以下是我的代码，错误代码为line 96。

什么可能是这个错误的原因，以及如何解决它？

window.onload=initAll; 
//////////////////////////////////////////////////////////////////// 
var msg_dialog=new DialogBox(); 
var send_msg_but=new Button(); 
//////////////////////////////////////////////////////////////////// 
msg_dialog.tit="New Message"; 
msg_dialog.bod="The Message Body Shall Reside Here"; 
msg_dialog.fot=send_msg_but; 
//////////////////////////////////////////////////////////////////// 
send_msg_but.label="Send"; 
send_msg_but.action=msg_dialog.done(); 
//////////////////////////////////////////////////////////////////// 
function initAll(){ 
    getDef(); 
} 
function $(x){ 
    return document.getElementById(x); 
} 
function _(x){ 
    return document.createElement(x); 
} 
function getDef(){ 
    var xhr; 
    var url="json/def.json"; 
    if(window.XMLHttpRequest){ 
     xhr=new XMLHttpRequest(); 
    } 
    else{ 
     xhr=new ActiveXObject("Microsoft:XMLHTTP"); 
    } 
    xhr.open("GET", url); 
    xhr.onreadystatechange=function(){ 
     //creating the buffer div here creates 3 instances of the same object   because the state changes from 0 (initial) to 1, 2 then 3 
     if(xhr.readyState==4 && xhr.status==200){ 
      var buffer=$("buffer"); 
      $("body_wrapper").removeChild(buffer); 
      var data=xhr.responseText; 
       data=JSON.parse(data); 
      for(var i in data){ 
       var article=_("div"); 
        article.setAttribute("id", "article"); 
                          //////////////////////////////////////////////////////////////////// 
       var img=_("div"); 
        img.setAttribute("id", "img"); 
        var img_data=_("img"); 
        img_data.src=data[i].img; 
       img.appendChild(img_data); 
                        ///////////////////////////////////////////////////////////////// 
      var caption=_("div"); 
       caption.setAttribute("id", "caption"); 
                       ////////////////////////////////////////////////////////////////// 
      var title=_("div"); 
       title.setAttribute("id", "title"); 
       title.innerHTML=data[i].title; 
                         ///////////////////////////////////////////////////////////////// 
      var story=_("div"); 
       story.setAttribute("id", "story"); 
       story.innerHTML=data[i].story; 
                         //////////////////////////////////////////////////////////////// 
      var hlink=_("div"); 
       hlink.setAttribute("id", "hlink"); 
       var a=_("a"); 
       a.href=data[i].href; 
       a.innerHTML=data[i].htext; 
       hlink.appendChild(a); 
                          /////////////////////////////////////////////////////////////// 
      caption.appendChild(title); 
      caption.appendChild(story); 
      caption.appendChild(hlink); 
      article.appendChild(img); 
      article.appendChild(caption); 
      $("body_wrapper").appendChild(article); 
     } 
    } 
} 
xhr.send(null); 
} 
function DialogBox(){ 
    this.tit; this.bod; this.fot; 
    this.render=function(){ 
    var win_width=window.innerWidth; 
    var win_height=window.innerHeight; 
    var dialog_box_width=(win_width*0.3); //measurements are in % 
    /////////////////////////////////////////////////////////////// 
    var dialog_box_overlay=$("dialog_box_overlay"); 
    dialog_box_overlay.style.display="block"; 
    /////////////////////////////////////////////////////////////// 
    var dialog_box=$("dialog_box"); 
    dialog_box.style.left=(0.5*(win_width-dialog_box_width))+"px";      //horizontally centre the div 
     dialog_box.style.top=(0.1*win_height)+"px"; 
    dialog_box.style.width=dialog_box_width+"px"; 
    dialog_box.style.display="block"; 
    /////////////////////////////////////////////////////////////// 
    $("dialog_box_head").innerHTML=this.tit; 
    $("dialog_box_body").innerHTML=this.bod; 
    $("dialog_box_foot").appendChild(this.fot); 
} 
this.done=function(){ 
    if(typeof $("dialog_box") !="undefined" && $("dialog_box")!=null){ 
     $("dialog_box").style.display="none"; 
    } 
    if(typeof $("dialog_box_overlay") !="undefined" &&         $("dialog_box_overlay")!=null){ 
      $("dialog_box_overlay").style.display="none"; 
     } 
        if(typeof $("dialog_box_foot") !="undefined" &&     $("dialog_box_foot")!=null){ 
      $("dialog_box_foot").innerHTML=""; 
     } 
    } 
} 
function Button(){ 
    var but_bod=_("span"); but_bod.setAttribute("class", "but");        but_bod.addEventListener("click", this.action, false);  this.label; 
} 

Answer 1

问题是

function DialogBox(){ 
    $("dialog_box_head").innerHTML=this.tit; 
    $("dialog_box_body").innerHTML=this.bod; 
    $("dialog_box_foot").appendChild(this.fot); 
} 
var msg_dialog=new DialogBox(); 
msg_dialog.tit="New Message"; 
msg_dialog.bod="The Message Body Shall Reside Here"; 
msg_dialog.fot=send_msg_but; 

当您使用msg_dialog=new DialogBox()，

• $("dialog_box_foot").appendChild(this.fot)运行第一
• msg_dialog.fot=send_msg_but运行后

我建议使用

function DialogBox(tit, bod, fot){ 
    $("dialog_box_head").innerHTML = this.tit = tit; 
    $("dialog_box_body").innerHTML = this.bod = bod; 
    $("dialog_box_foot").appendChild(this.fot = fot); 
} 
var msg_dialog=new DialogBox(
    "New Message"; 
    "The Message Body Shall Reside Here"; 
    send_msg_but 
); 

此外，在Button你忘记返回的HTML元素，为了使send_msg_but一个节点，其可以被所附：

function Button(){ 
    var but_bod=_("span"); 
    but_bod.setAttribute("class", "but"); 
    but_bod.addEventListener("click", this.action, false); // Note `this.action` is undefined 
    this.label; // This does nothing, so better remove it 
    return but_bod; // Add this 
}