一般有两种方法:一是通过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>
<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>
<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>
<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()。