Js为表单动态添加节点内容的方法

这篇文章主要介绍了Js为表单动态添加节点内容的方法,实例分析了js针对表单节点进行添加操作的常用技巧,需要的朋友可以参考下

本文实例讲述了Js为表单动态添加节点内容的方法。分享给大家供大家参考。具体如下:

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"> 
<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" value="增加一张图片"/>    
    <input type="button" value="增加一个选项"/><br /> 
    <ol> 
        <li><input type="text" /></li> 
    </ol> 
 </div> 
</body> 
</html>

2. 程序效果图:

Js为表单动态添加节点内容的方法

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfxyj.html