为了提高网页的加载速度，减少服务器的压力。我们会采用javascript动态来创建html页面元素。好处是有的，但坏处也会相对而行。我们在创建html元素会存在一些浏览器兼容性的问题。主要表现于ie7 及其以下版本。以下对此进行问题 分析和处理。
/*
动态创建页面素时会存在一些兼容性的问题（仅存在于ie7 及更低的版本）
已知的一些问题：
1.不能设置动态创建的<iframe> 元素的name属性
2.不能通过表单的reset()方法重设动态重建的<input>元素
3.动态创建的type特性值为reset的<button>元素重置不了表单
4.动态创建的一批name相同的单选/复选 按钮彼此毫无关系。name值相同的一组单选/复选 按钮本来应该用于表示同一选项的不同值，但动态创建的一批这种单选按钮之间却没有这种关系。
*/
<!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>
</head>
<body>
</body>
<script language="javascript" type="text/javascript">
//（一） 兼容 IE7以上或者其他浏览器
/* var box1= document.createElement("input");
box1.type="checkbox";
box1.name="age";
box1.value="20";
var box2= document.createElement("input");
box2.type="checkbox";
box2.name="age";
box2.value="20";
var box3= document.createElement("input");
box3.type="checkbox";
box3.name="all";
box3.value="20";
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].onclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}*/
//（二） 兼容 IE7 及其以下的浏览器
/*var box1= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"21\" />");
var box2= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"22\" />");
var box3= document.createElement("<input type=\"checkbox\" name=\"all\" value=\"22\" />"); ;
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].onclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
} */
//（三） 兼容各种浏览器的方法
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if(parseInt(Sys.ie)<=7){
var box1= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"21\" />");
var box2= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"22\" />");
var box3= document.createElement("<input type=\"checkbox\" name=\"all\" value=\"22\" />"); ;
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].onclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}
}else{
var box1= document.createElement("input");
box1.type="checkbox";
box1.name="age";
box1.value="20";
var box2= document.createElement("input");
box2.type="checkbox";
box2.name="age";
box2.value="20";
var box3= document.createElement("input");
box3.type="checkbox";
box3.name="all";
box3.value="20";
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].onclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}
}
</script>
</html>
问题补充：
js动态创建页面时，对于搜索引擎不是那么的友好。为了促使友好体验，我们还需要去选择的去使用。如果我们做的是一个管理型的或者是产品型的项目，就不用去考虑搜索引擎了，反之其他的需要考虑。
相关推荐
本文将深入探讨如何利用JavaScript动态生成HTML页面元素，包括使用innerHTML属性和DOM（Document Object Model）方法两种主要方式，以及在不同浏览器环境下的兼容性问题。 ### 1. 使用innerHTML属性 `innerHTML`...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
几个月前创建的一个小网站，在重新访问时，发现JavaScript动态生成的HTML元素中的中文出现了乱码，但后台返回的动态中文数据却没有问题。这说明问题可能出在前端JavaScript的编码处理上。 通常，开发者会尝试将所有...
- 使用`addEventListener`和`removeEventListener`来绑定和解绑事件，而不是传统的`on*`属性，因为它们更灵活，且在处理动态创建的元素时更适用。 - 使用`event.stopPropagation()`阻止事件冒泡，`event....
#### JavaScript动态创建HTML元素 JavaScript提供了`document.createElement()`方法来创建新的元素节点。通过此方法，我们可以创建任何类型的HTML元素，并通过DOM API将其添加到页面中的指定位置。 **创建select...
以上介绍了JavaScript动态创建div元素的几种方法和相关知识点。通过这些方法，开发者可以灵活地控制页面内容，实现各种交互效果。但是，随着Web技术的发展，现代前端开发越来越依赖于框架和库来处理这些操作，这使得...
JavaScript瀑布流布局是一种常见的网页设计模式，常用于展示图片或者文章...总的来说，JavaScript瀑布流和吸顶效果是网页动态布局的重要技术，结合适当的兼容性处理，可以在各种现代和老旧浏览器中提供一致的用户体验。
JavaScript是一种广泛应用于网页和网络应用的脚本语言，它在客户端运行，为用户提供动态、交互式的用户体验。在网页编程中，JavaScript特效是不可或缺的一部分，它能够使网站更加生动有趣，吸引用户注意力，提升用户...
### 动态创建表格（代码不兼容IE6） 在不兼容IE6的实现方法中，作者使用了`document.createElement`方法动态地创建了表格的行（`<tr>`）和单元格（`<td>`）。然后通过`innerText`属性向单元格内添加文本内容。由于...
这个教程“零基础学JavaScript动态网页设计”显然是为初学者量身定制的，旨在帮助没有编程背景的人掌握创建交互式网页的基本技能。以下是对这个主题的详细解释： 一、JavaScript简介： JavaScript是一种解释型、跨...
通过DOM，JavaScript可以查找、修改和添加网页元素，实现动态更新页面内容。例如，我们可以使用`document.getElementById`、`document.createElement`、`element.appendChild`等方法来操作DOM。 事件处理是...
网页特效是指通过JavaScript和CSS实现的各种动态视觉效果，可以增强用户体验和网站的吸引力。这可能包括页面过渡、图片轮播、滑动面板、滚动动画等。利用jQuery库，开发者可以轻松实现这些特效，比如使用 `.fadeIn()...
《JavaScript动态网页设计经典实例教程》是一本专为学习JavaScript动态网页设计的书籍，通过提供一系列的实例代码，帮助读者深入理解和应用JavaScript技术。在网页设计领域，JavaScript扮演着至关重要的角色，它使得...
在JavaScript和jQuery的世界里，动态创建DOM元素是常见的需求，特别是在构建交互丰富的Web应用时。然而，不恰当的实现方式可能会导致性能问题和兼容性挑战。让我们深入探讨基于jQuery的动态创建DOM元素的最佳实践。 ...
在网页设计中，JavaScript是一种非常重要的脚本语言，它赋予了网页动态交互的能力。"hover"是CSS（层叠样式表）中的一个伪类选择器，用于定义鼠标悬停时元素的样式。当用户将鼠标指针悬停在某个元素上时，hover效果...
JavaScript，作为全球最广泛使用的编程语言之一，是创建动态网页的关键技术。本书“精通JavaScript ——动态网页(实例版)”旨在通过详尽的实例帮助读者深入理解和熟练掌握JavaScript的核心概念和应用。 首先，我们...
在网页设计中，动态菜单是一种常见的交互元素，它能够提供用户友好的导航体验。JavaScript作为客户端脚本语言，是实现动态菜单的首选工具。本文将深入探讨如何利用JavaScript实现各种类型的动态菜单，包括树型目录...
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在创建交互式用户界面方面表现出色。在本案例中，"javascript经典特效---动态状态栏说明.rar" 提供的是关于如何使用JavaScript来实现动态状态栏的教程。...
JavaScript通过DOM可以对网页元素进行增删改查，实现动态效果。比如，你可以使用JavaScript来改变文本内容、样式、添加或移除元素，以及处理事件（如点击、滚动等）。 三、事件处理 JavaScript事件处理是网页互动性...