JavaScript动态创建元素

我的页面上有这样一个元素<div>
    产品类别：<input type="text" name="productType" /><br />
    产品图片：<input type="text" name="productImg" /><br />
    产品名称：<input type="text" name="productName" /><br />
    产品说明：<textarea rows="10" cols="50" name="productIntroduce"></textarea>
</div>有一个按钮，点击它的时候调用JavaScript，创建一个层，层里包含上述代码所示的所有表单元素。该如何实现呢？

解决方案 »

  1.   


    <div id="productDiv" style="display: none;">
        产品类别：<input type="text" name="productType" /><br />
        产品图片：<input type="text" name="productImg" /><br />    
        产品名称：<input type="text" name="productName" /><br />
        产品说明：<textarea rows="10" cols="50" name="productIntroduce"></textarea>
    </div>
    <input type="button" value="查看" onClick="showProductDiv();" >
    <script type="text/JavaScript">
    function showProductDiv(){
    document.getElementById("productDiv").style.display = '';
    }
    </script>
      

  2.   

    function showDiv()
    {
    html += '<div>
    html += '    产品类别：<input type="text" name="productType" /><br />'
    html += '    产品图片：<input type="text" name="productImg" /><br />  '  
    html += '    产品名称：<input type="text" name="productName" /><br />'
    html += '    产品说明：<textarea rows="10" cols="50" '
    html += '     name="productIntroduce"></textarea>'
    html += '</div>'
    $("").innerHTML = html;
    }
      

  3.   

    方法有很多!
    我觉得  利用 层的可见性那个比较有意思。简单楼上的这个方案性能最低！  +=“” 的操作没事不要做这么多!下面的 楼主可参考下!..
    <html><script>
    function create(){
    var div = document.getElementById("div");
    var array = new Array;
    array.push("type");
    array.push("name");
    array.push("img"); for(var i = 0 ;i< array.length ; i++){
    var br = document.createElement("<BR>");
    var objE = document.createElement("<INPUT>");
    objE.type = "text";
    objE.name = array[i];
    div.appendChild(objE);
    div.appendChild(br);
    }

    var tx = document.createElement("<TEXTAREA>");
    tx.name = "tx";
    tx.rows = 10;
    tx.cols = 50;

    div.appendChild(tx);
    }
    </script>
    <body> <div id = "div"></div>
    <input type = "button" onclick = "create();"/>
    </body>
    </html>
      

  4.   


        function create(){
    var div = document.getElementById("div");
    var array = new Array;
    array.push("type");
    array.push("name");
    array.push("img"); for(var i = 0 ;i< array.length ; i++){
    var br = document.createElement("<BR>");
    var objE = document.createElement("<INPUT>");
    objE.type = "text";
    objE.name = array[i];
    div.appendChild(objE);
    div.appendChild(br);
    }

    var tx = document.createElement("<TEXTAREA>");
    tx.name = "tx";
    tx.rows = 10;
    tx.cols = 50;

    div.appendChild(tx);
    }