JavaScript 动态向表单添加节点的方法

JavaScript 动态添加节点概述

本文介绍一种使用 JavaScript 动态向表单添加节点内容的方法，供读者参考。

代码实现与结构

1. 代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加节点</title>
<script type="text/javascript">
function newPicture() {
var picElement = document.createElement("img");
picElement.src = "images/success.jpg";
picElement.width = 100;
picElement.height = 100;
document.body.appendChild(picElement);
   }  
     
function newNode() {
var olElement = document.getElementById('answers');
var liElement = document.createElement('li');
         
var inputElement = document.createElement('input');
inputElement.type = "text";
inputElement.name = "answer";
         
liElement.appendChild(inputElement);
olElement.appendChild(liElement);
   }  
</script>
</head>
  
<body>
<div>
<input type="button" name="button" value="增加一张图片" onclick="javascript:newPicture();"/>
<input type="button" name="button" value="增加一个选项" onclick="javascript:newNode();"/><br />
<ol id="answers">
<li><input type="text" name="answer" /></li>
</ol>
</div>
</body>
</html>

运行效果说明

2. 程序运行效果如图：

希望本文所述内容对大家的 JavaScript 程序设计有所帮助。