在Div中自动添加控件

最新推荐文章于 2023-11-30 08:39:27 发布

天涯独行

最新推荐文章于 2023-11-30 08:39:27 发布

阅读量3.2k

点赞数

文章标签： div button javascript input function server

本文链接：https://blog.csdn.net/qiushengb/article/details/5318909

版权

利用document.createElement()方法在指定的Div中加入控件：

e.value = "这是测试加载的小例子";
e.onclick = function() {

      e.parentNode.parentNode.removeChild(this .parentNode);
       }
      var b = document.createElement("br");
       board.appendChild(e);
       board.appendChild(b);

如上是加入一个Button后换行

         var e = document.createElement("select");
        e.options[0] = new Option("选项一", "");
        e.options[1] = new Option("选项二", "");
          board.appendChild(e);

如上是加入一个下拉选择框控件

         var e = document.createElement("input");
         e.setAttribute("type", "button");
         e.setAttribute("value", "OK");
         e.setAttribute("onclick", "javascript:alert('你好');");

         board.appendChild(e);

如上是用另一种方法给添加的控件添加属性

         var newNode = document.createElement("p");
         var board1 = document.getElementById("x1");
         newNode.innerHTML = "This is a test";
         //测试从这里开始
         //appendChild方法：
         board.appendChild(newNode);
         //insertBefore方法：
         board.insertBefore(newNode, null); //newNode控件加到未尾

board.insertBefore(newNode,board1) //newNode控件加到x1前面

board.insertBefore(newNode.board1.nextSiblstring) //newNode控件加到x1后面

board.insertBefore(newNode,board.childNodes[0...]) //newNode控件加到指定子控件的前面

如上是在指定位置处插入控件

     }      </script>
<body>
    <form id="form1" runat="server">
    <div id="Test">
    <p id="x1">一节点</p>
    <p>二节点</p>
    </div>
    <input id="btn1" type ="button" value ="确定" onclick ="Add()" />
    </form>
</body>
</html>