<script>
    window.onload=function(){
        var btn=document.createElement('button');//创建一个button标签
        document.body.appendChild(btn);
        btn.innerHTML="点击";
        btn.setAttribute("id","btn1");//给button添加一个id的属性
        var btn1=document.getElementById("btn1");//获取id
        btn1.onclick=function(){//给这个id添加一个点击事件
            btn.style.display="none";//点击后隐藏这个按钮
            var div=document.createElement("div");//创建一个div
            div.setAttribute("class","div");//给这个div一个class 的值并且命名为div
            div.innerHTML="用户名";//将用户名放入在前面创建的div里面
            div.style.cssText="width:50px;color:#000";//设置这个div的宽和字体颜色
            document.body.appendChild(div);//将这个div放在body里面
            var input1=document.createElement("input");//创建一个input标签
            input1.setAttribute("type","text");//给这个input标签添加一个type的属性和type的值text
            document.body.appendChild(input1);//放在body里面（排序方式一次往后面排）
            var br=document.createElement("br");//创建一个br标签
            document.body.appendChild(br);//放在body里面（排序方式一次往后面排）
            var btn1=document.createElement("input");//创建一个input标签
            btn1.setAttribute("type","button");//给这个input标签添加一个type的属性和type的值button
            btn1.setAttribute("value","登录");//给这个input标签添加一个value和value的值登录
            document.body.appendChild(btn1)//将btn1添加到body里面
        }
    }
</script>

对象数组的概念：
 如果一个数组中的元素是对象类型，则称该数组为对象数组。
 当需要一个类的多个对象时，应该用该类的对象数组来表示，通过改变下标值就可以访问到不同的对象。
 对象数组的定义和使用：
 对象数组的定义与一般数组的定义类似，但是需要为每一个元素实例化。
 对象数组的声明形式是：
 类名 对象数组名 [ ];
 为对象数组分配内存空间：
 对象数组名=new 类名[数组长度]；//注意 ：此处不是构造方法了
 可以将对象数组的声明和创建用一条语句来完成。例如：定义一个学生类对象数组，可以用下面的语句定义：Student stu[ ]=new Student[30]; stu [ ]是对象数组名，它所表示的数组一共有30个元素，每一个元素都是Student类的对象名，还没有实例化，所以还必须为每一个元素实例化。比如如下的过程：
 for(int i=0;i<stu.length;i++)
 stu[i]=new Student()；
 实例化以后就可以使用每一个元素对象。
 设计一个雇员类，并创建雇员类的对象数组，输出每个雇员的信息
 
//设计一个雇员类，并创建雇员类的对象数组，输出每个雇员的信息
class Employee {   //雇员类
 private String id;  //编号
 private String name; //姓名
 private int age;     //年龄
 private String vocation; //职务
 public Employee(){} //构造方法一
 public Employee(String id,String name,int age,String vocation){
  set(id,name,age,vocation);
 }
 //设置属性的方法
 public void set(String id,String name,int age,String vocation){
  this.id=id;
  this.name=name;
  this.age=age;
  this.vocation=vocation;
 }
 public String toString() {
  String mess=id+","+name+","+age+","+vocation;
  return mess;
 }
}
public class Example4  {
 public static void main(String[] args) {
  Employee 雇员[]=new Employee[3];
  int i;
  for(i=0;i<雇员.length;i++)//为对象数组中每一个元素实例化
  雇员[i]=new Employee();//如果没有写构造方法一，而这样写，会出错
  //因为类中有有参的构造方法，系统就不会在默认给无参的构造方法了，
  //所以当类中写了有参的构造方法后，要用无参的构造方法时必须写出来
  
  //每一个对象元素分别初始化
  雇员[0].set("0001","张文军",50,"总经理");
  雇员[1].set("0002","李琦",45,"副经理");
  雇员[2].set("1016","张丽",28,"秘书");
  for (Employee employee:雇员)
   System.out.println(employee.toString());
 }
}
 

 普通型for循环和增强型for循环
 普通型
 
a={1,2,3,4,5};
for(int i=0;i<a.length;i++) {
 System.out.println9(a[1]);
}
 
增强型
 
for(int element:a) {
System.out.println(element);
}
 
两者结果相同，但是增强型更为简洁
 
对象数组还可以采用初始化的方法创建。创建形式是：
 类名 对象数组名[ ]={对象列表}；
 
设计一个雇员类，创建雇员类的对象数组并初始化，输出每个雇员的信息，仍然沿用上面的Employee类，程序如下
 
class Employee {   //雇员类
 private String id;  //编号
 private String name; //姓名
 private int age;     //年龄
 private String vocation; //职务
 public Employee(){} //构造方法一
 public Employee(String id,String name,int age,String vocation){
  set(id,name,age,vocation);
 }
 //设置属性的方法
 public void set(String id,String name,int age,String vocation){
  this.id=id;
  this.name=name;
  this.age=age;
  this.vocation=vocation;
 }
 public String toString() {
  String mess=id+","+name+","+age+","+vocation;
  return mess;
 }
}
public class Example11 {
 public static void main(String[] args) {
  //先创建3个雇员对象
  Employee employee1=new Employee("0001","张文军",50,"总经理");
  Employee employee2=new Employee("0005","李琦",45,"副经理");
  Employee employee3=new Employee("1016","张丽",28,"秘书");
  //声明对象数组并直接初始化
  Employee 雇员1[]={employee1,employee2,employee3};
  output(雇员1);//输出雇员信息
  System.out.println("------------------");//分割线
  //声明对象数组并直接初始化，初始化元素直接调用
  //构造方法创建对象
  Employee 雇员2[]={new Employee("0001","张文军",50,"总经理"),
  new Employee("0005","李琦",45,"副经理"),
  new Employee("1016","张丽",28,"秘书")};
  output(雇员2);
 }
 //定义方法用于输出雇员信息，注意方法是private,static
 private static void output(Employee 雇员[]){
  for(Employee employee:雇员)
   System.out.println(employee.toString());
 }
}
 

JQ创建Dom元素
 
HTML代码
 
<div class="pc-container">
</div>
 
JS代码
 
var container = $('.pc-container');
$('<img>').attr({
            src:'images/star.png'
        }).css({
                top:'50px',
                left:'50px',
                transform:'scale(.5) rotateZ(90deg)',
                position: 'absolute'
 }).addClass('myImg').appendTo('.pc-container');
 
 
 
JS创建Dom元素
 
HTML代码
 
<div class="pc-container">
</div>
 
JS代码
 
var container=document.getElementsByClassName('.pc-container')[0];
var div=document.createElement('div');
div.setAttribute('id','example');// div.id = "example";div.className = "slogan";
div.style.width='120px';
container.appendChild(div);
 
 
插入元素的几种方法
 
这里顺便总结一下插入元素的几种方法 
 JavaScript： 
 element1.appendChild(element2); 在element1的内部结尾追加element2.
 
JQuery:
 
$(A).append(content|fn) 在匹配的元素A内部结尾追加内容 
$(A).appendTo(B) 将A的内容追加到B内部结尾 
$(A).prepend(content) 在匹配的元素A内部的开头插入content内容 
$(A).prependTo(B) 将匹配到的A元素追加到B的开头

$(A).after(content) 在匹配的元素A之后插入内容content 
$(A).before(content) 在匹配的元素A之前插入内容content 
$(A).insertAfter(B) 将A的内容追加到B之后 
$(A).insertBefore(B) 将A的内容追加到B之前

一、使用jQuery创建元素
 
1、创建元素
 

$(function(){
var $h1=$(“<h1></h1>”);
$(“body”).append($h1);
})
 
2、创建文本
 

$(function(){
var $h1=$(“<h1>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})
 
3、创建属性
 

$(function(){
var $h1=$(“<h1 title=“一级标题”  class=“red”>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})

 
 
二、使用jQuery插入元素
 
1、在节点内部插入内容
 
（1）、append()方法在被选元素的结尾（仍然在内部）插入指定内容
 
   提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。
 
        语法：$(selector).append(content)
 
   content必需。规定要插入的内容（可包含 HTML 标签）。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Hello world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>


 

 
 
  使用函数来附加内容，使用函数在指定元素的结尾插入内容。
 
        语法：$(selector).append(function(index,html))
 
  function(index,html) 必需。规定返回待插入内容的函数。
 
  index - 可选。接收选择器的 index 位置。
 
  html - 可选。接收选择器的当前 HTML。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(function(n){
      return "<b>This p element has index " + n + "</b>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>

 


 
 
 
 
（2）、appendTo()方法在被选元素的结尾（仍然在内部）插入指定内容
 
  提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
 
       语法：$(content).appendTo(selector)
 
  content必需。规定要插入的内容（可包含 HTML 标签）。
 
  selector必需。规定把内容追加到哪个元素上。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b> Hello World!</b>").appendTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
 

 
 


 
（3）、prepend() 方法在被选元素的开头（仍位于内部）插入指定内容
 
  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。
 
        语法：$(selector).prepend(content)
 
  content必需。规定要插入的内容（可包含 HTML 标签）。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend("<b>Hello world!</b> ");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>

 


 
 
  使用函数来附加内容，使用函数在被选元素的开头插入指定的内容。
 
        语法：$(selector).prepend(function(index,html))
 
  function(index,html) 必需。规定返回待插入内容的函数。
 
  index - 可选。接受选择器的 index 位置。
 
  html - 可选。接受选择器的当前 HTML。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend(function(n){
      return "<b>这个 p 元素的 index 是：" + n + "</b> ";
    });
  });
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>


 

 
 

 
 
（4）、prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
 
  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。
 
         语法：$(content).prependTo(selector)
 
  content 必需。规定要插入的内容（可包含 HTML 标签）。
 
  selector 必需。规定在何处插入内容。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("<b>Hello World!</b>").prependTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本</button>
</body>
</html>

 


 
 
 
 
2、在节点外部插入内容
 
（1）、after() 方法在被选元素后插入指定的内容
 
       语法：$(selector).after(content)
 
   content必需。规定要插入的内容（可包含 HTML 标签）。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>

 


 
 

 
 
  使用函数来插入内容，使用函数在被选元素之后插入指定的内容。
 
        语法：$(selector).after(function(index))
 
  function(index) 必需。规定返回待插入内容的函数。
 
  index - 可选。接收选择器的 index 位置。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(function(n){
      return "<p>The p element above has index " + n + "</p>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>

 


 
 
 
 
（2）、before() 方法在被选元素前插入指定的内容
 
        语法：$(selector).before(content)
 
    content 必需。规定要插入的内容（可包含 HTML 标签）。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").before("<p>Hello world!</p>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>

 


 
 
  使用函数来插入内容，使用函数在指定的元素前面插入内容。
 
     语法：$(selector).before(function(index))
 
  function(index)必需。规定返回待插入内容的函数。
 
  index - 可选。接收选择器的 index 位置。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").before(function(n){
      return "<p>The p element below has index " + n + "</p>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>

 


 
 
 
 
（3）、insertAfter()把匹配的元素插入到另一个指定的元素集合的后面
 
  注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
 
       语法：$(content).insertAfter(selector)
 
  content必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
 
  selector必需。规定在何处插入被选元素。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>你好！</span>").insertAfter("p");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
</body>
</html>

 


 
 
插入已有的元素
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h1").insertAfter("p");
  });
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 h1 元素</button>
</body>
</html>

 


 
 

 
 
（4）、insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
 
   注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
 
        语法：$(content).insertBefore(selector)
 
   content 必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
 
   selector 必需。规定在何处插入被选元素。
 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>你好！</span>").insertBefore("p");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之前插入 span 元素</button>
</body>
</html>