怎样在第一个子节点加一个输入框？

<html>
<head>
<title></title>
</head>
<body>
<script>
function response()   
{
var ment=document.getElementById("menu").childNodes;
var p=" <input type='text'>"
ment.appendChild(p.firstChild); 
}  
</script>
<div id="menu">
  <P> 11111111111</P>
  <P> 22222222222</P>
  <P> 33333333333 </P>
  <input type="button"  value="check"  onclick="response()"/>
  
</div>
</body>
</html>问题:这样不能实现在<div id="menu">中的第一个子节点加个输入框 该怎样做呢？

解决方案 »

  1.   

    menu.childNodes[0].innerHTML="爱加什么加什么";
      

  2.   

    实现原理

    var menuEl = document.getElementById('menu'),
    menuElInner = menuEl.innerHTML,
    inputStr = '<input type="text" name="price" />';menuEl.innerHTML = inputStr + menuElInner;
      

  3.   

    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script>
        function response() {
        var ment = document.getElementById("menu").getElementsByTagName("P");  //menu下面所有pvar p = document.createElement("input");
    p.type = "text"; 
    ment[0].appendChild(p); 
    }  
    </script>
    <div id="menu">
      <P> 11111111111</P>
      <P> 22222222222</P>
      <P> 33333333333 </P>
      <input type="button" value="check" onclick="response()"/>
      
    </div>
    </body>
    </html>
      

  4.   


    function response(){
    var ment=document.getElementById("menu").childNodes;
    var div = false;
    for(var i=0; i<ment.length; i++){
    if(ment[i].nodeType == 1){
    div = ment[i];
    break;
    }
    }
    if(div){
    console.log();
    var p="<input type='text'>"
    div.innerHTML += p;  
    }
    }