留言板

最新推荐文章于 2024-05-12 09:04:29 发布

9栋108

最新推荐文章于 2024-05-12 09:04:29 发布

阅读量111

点赞数

原文链接：http://www.cnblogs.com/liwentao/p/7041497.html

版权

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid #F00;
}
</style>
<script>
/**
* 需求：
* 点击按钮，把输入框里的内容显示box里
*分析：
* 1.获取到按钮、文本框、box
* 2.给按钮添加点击事件
* 1.获取用户输入的内容(text的value)
* 2.把获取到的内容显示到box里面
*/
window.οnlοad=function(){
var text=document.getElementById('text');
var btn=document.getElementById('btn');
var box=document.getElementById("box");
btn.οnclick=function(){
var val=text.value; //用户输入的内容
var newText='<p>'+val+'<p>'
//console.log(val);
//innerHTML

//字符串拼接
//<p>val</p>
//原来的内容 box.innerHTML
//新输入的内容 '<p>'+val+'<p>'
/**
* innerHTML
* 设置内容
* 获取内容（老内容）
*/
//box.innerHTML=box.innerHTML+'<p>'+val+'<p>' //新内容在下面显示
box.innerHTML=newText+box.innerHTML; //新内容在上面显示
};
};
</script>
</head>
<body>
<input type="text" id="text" value="" />
<input type="button" id="btn" value="提交"/>
<div id="box"></div>
</body>