javascript - 更改节点内容失败 + JavaScript

Question

我编写了这段代码，用于使用 div 标签创建菜单

HTML:

<div id="firstMenuList">
            <div id="firstMenu">choose▼</div> 
                <div id="menulist" class="menulist"></div>    
</div>

JavaScript:

<script>
function ccc() {
 
 var id="firstMenu";

 var ar=new Array("hi","there","hello","world");

 var node=document.createElement("div");

 var parent=document.getElementById("menulist");
 
 var nodeData="";

 for (var i=0;i<ar.length;i++)
 {
    var node=document.createElement("div");
    node.setAttribute("id",id+""+i);
    node.setAttribute("class","menulist");
    
    node.setAttribute("onclick","select("+id+""+i+")");
    node.style.top=((i+1)*100)+3+"%";
    node.innerHTML=ar[i];
    parent.appendChild(node);
    
 }
}

function select(id)
{   
 var p=document.getElementById(id);<-this doesn't work on elements that created dynamically
 p.style.backgroundColor="red";
 var t = p.innerHTML;
}
</script>

此代码创建了菜单，但是当我单击菜单项时代码中断。错误是:

"parent is null"

Answer 1

要将 id 传递给函数，您需要确保在 id 两边加上引号:

node.setAttribute("onclick","select('"+id+i+"')");
// note the single quotes ----------^--------^

演示:http://jsfiddle.net/QK5Wh/1/

但是当您可以传递对元素本身的直接引用时，您不需要使用 id 来获取元素:

node.setAttribute("onclick","select(this)");

然后:

function select(p) {   
    p.style.backgroundColor="red";
    var t = p.innerHTML;
}

演示:http://jsfiddle.net/QK5Wh/