JavaScript动态创建元素

我的页面上有这样一个元素
JScript code:

<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，创建一个层，层里包含上述代码所示的所有表单元素。该如何实现呢？

---

innerHTML

---

HTML code:

<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"