js 动态创建网页对象

  一般有两种方法:一是通过innerHTML来添加元素;二是通过appendChild()来添加。

  区别是:前者添加后,不会立即生效;而后者则会立即生效。

  例子:

  静态页面:

<html>
    
<head>
        
<script type="text/javascript">
            
function loginSubmit(name_input_control_name, password_input_control_name, username, userpwd, destUrl){
                
var userName = document.getElementById("auto_login_username");
                
var password = document.getElementById("auto_login_password");
                
var login = document.getElementById("form_auto_login_by_fengyf");
                userName.name 
= name_input_control_name;
                password.name 
= password_input_control_name;
                userName.value 
= username;
                password.value 
= userpwd;
                login.action 
= destUrl;
                
                login.submit();
            }

        
</script> 
    </head>
 
    
<body>
        
<div id="div_auto_login">
            
<form id="form_auto_login_by_fengyf" action="" method="post" target="_self">
                
<input type="text" id="auto_login_username" />
                <input type="password" id="auto_login_password" />
            <form>
        
</div>
        <input type="button" value="登录百度空间" onclick="javascript: loginSubmit('username', 'password', 'shcswlkj', 'chengshan', 'https://passport.baidu.com/?login')">
    
</body>
</html>

  采用js动态添加——通过innerHTML:

<html>
    
<head>
        
<script type="text/javascript">
            
function loginSubmit(name_input_control_name, password_input_control_name, username, userpwd, destUrl)
                
var div_login = document.createElement("div");
                div_login.style.cssText 
= "display:block;";
                document.body.appendChild(div_login);
                
                div_login.innerHTML 
= "<form id='auto_login_form_by_fengyf' method='post' action='' target='_self'>";
                div_login.innerHTML 
+= "<input type='text' id='auto_login_username'>";
                div_login.innerHTML 
+= "<input type='password' id='auto_login_password'>";
                div_login.innerHTML 
+= "</form>";
                
                
var userName = document.getElementById("auto_login_username");
                
var password = document.getElementById("auto_login_password");
                
var login = document.getElementById("auto_login_form_by_fengyf");
                userName.name 
= name_input_control_name;
                password.name 
= password_input_control_name;
                userName.value 
= username;
                password.value 
= userpwd;
                login.action 
= destUrl;
                
                
//login.submit();
            }

        
</script> 
    </head>
 
    
<body>
        
<input type="button" value="登录百度空间" onclick="javascript: loginSubmit('username', 'password', 'shcswlkj', 'chengshan', 'https://passport.baidu.com/?login')">
    
</body>
</html>

  动态创建网页元素——通过createElement()和appendChild():

<html>
    
<head>
        
<script type="text/javascript">
            
function loginSubmit(name_input_control_name, password_input_control_name, username, userpwd, destUrl)
                
var div_login = document.createElement("div");
                div_login.style.cssText 
= "border:0px;";
                div_login.style.display 
= "block";
                document.body.appendChild(div_login);
                
                
var form_auto_login = document.createElement("form");
                form_auto_login.id 
= "auto_login_form_by_fengyf";
                form_auto_login.method 
= "post";
                form_auto_login.action 
= destUrl;
                div_login.appendChild(form_auto_login);
                
                
var text_username = document.createElement("input");
                text_username.type 
= "text";
                text_username.id 
= "auto_login_username";
                text_username.name 
= name_input_control_name;
                text_username.value 
= username;
                form_auto_login.appendChild(text_username);
                
                
var text_userpwd = document.createElement("input");
                text_userpwd.type 
= "password";
                text_userpwd.id 
= "auto_login_password";
                text_userpwd.name 
= password_input_control_name;
                text_userpwd.value 
= userpwd;
                form_auto_login.appendChild(text_userpwd);
                
                form_auto_login.submit();
            }

        
</script>
    </head>
 
    
<body>
        
<input type="button" value="登录百度空间" onclick="javascript: loginSubmit('username', 'password', 'shcswlkj', 'chengshan', 'https://passport.baidu.com/?login')">
        
<input type="button" value="登录126邮箱" onclick="javascript: loginSubmit('user', 'password', 'chaomengyuexiang', 'a11314a11314', 'http://entry.126.com/cgi/login')">
        
<a href="http://entry.126.com/cgi/login?domain=126.com&language=0&bCookie&user=chaomengyuexiang&pass=a11314a11314">登录126邮箱</a>
    </body>
</html>

  这3种情况下,第二种情况,即通过innerHTML的方式来动态创建网页元素时,被动态创建的表单form无法提交,而第三种情况,即通过createElement()和

appendChild()的方式动态创建的表单form便可以提交:submit()。

原文地址:https://www.cnblogs.com/pricks/p/1606034.html