input文本框输入内容时实时显示在别的盒子。

一、技术要点：

1、清除div中的内容，$("div").empty();

2、清除<input type=‘text’/>输入的内容，$("input").val("");，获取input里已经输入的内容$("input").val();

3、给盒子中（向后）添加内容，$("div").append("内容");

4、事件.keyup();

二、示例：

html：

<div></div>

<input  class="here"  type="text" />

jQuery:

<script type="text/javascript">

$(function(){

var cstext=$(".here").val();      //获取文本框初始存在的值

$(".here").prev().appengd(cstext);     //把初始值存到盒子中

$(".here").keyup(function(){      //keyup事件，当在文本框中输入任何东西（包括删除键）时触发的事件

var xztext=$(this).val();    //获取输入东西后现在文本框里的值

$(this).prev().empty();    //清空盒子里原来的内容

$(this).prev().append(xztext);  //把文本框输入后的内容添加到盒子中

})

})

</script>

三、技术扩展：

1、.keydown()事件

2、appendTo()方法     本方法参数元素的结尾插入内容

3、prepend()方法         被选元素的里边开头插入内容

4、prependTo()方法    本方法参数元素的开头插入内容

5、after()方法                 被选元素之后插入内容

6、before()方法             被选元素之前插入内容