• 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()。

  • 相关阅读:
    表示数值的字符串
    正则表达式匹配
    删除链表中重复的结点
    数值的整数次方
    [CSP-S模拟测试]:大新闻(主席树)
    [CSP-S模拟测试]:密码(AC自动机+DP)
    [CSP-S模拟测试]:壕游戏(费用流)
    [CSP-S模拟测试]:山洞(DP+快速幂)
    [CSP-S模拟测试]:阴阳(容斥+计数+递推)
    [CSP-S模拟测试]:虎(DFS+贪心)
  • 原文地址:https://www.cnblogs.com/pricks/p/1606034.html
Copyright © 2020-2023  润新知