标签：样式 inpu -- inner osi back bsp put int
创建 多个div
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1 {
width:200px;
height:200px;
background-color:aqua;
}
.ddd {width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" value="创建" />
</body>
</html>
<script type="text/javascript">
var div = document.getElementById(‘div1‘);
var btn = document.getElementById(‘btn‘);
btn.onclick = function () {
div.innerHTML+="<div class=‘ddd‘></div>"
}
</script>
评论添加删除
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<!-- 大总框-->
<div class="all">
<textarea id="text"></textarea>
<input type="button" value="发表" id="btn" />
<input type="text" id="uuu" placeholder="请输入用户名" />
</div>
<div class="iterm">
</div>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById(‘btn‘);
var int = document.getElementsByClassName(‘tterm‘);
//内容取值
var t = document.getElementById(‘text‘);
var text = t.value;
//用户名取值
var a = document.getElementById(‘uuu‘);
var user = a.value;
// 添加内容
btn.onclick = function () {
int.innerHTML+="<div class=‘cell‘>"+user+"</div><div class=‘cell‘>"+text+"</div><div class=‘cell‘><input type=‘button‘ value=‘删除‘ id=‘dele‘ /> 2017-03-02</div>"
}
</script>
css
* {
margin: 0px;
padding: 0px;
}
.all {
margin-left: 20%;
width: 60%;
height: 400px;
background-color: gray;
}
#text {
width: 100%;
height: 300px;
border: 1px solid black;
}
.iterm {
margin-left: 20%;
width: 60%;
background-color: blue;
}
.cell {
position:relative;
height:50px;
width:80%;
margin-left:10%;
border-bottom:1px dashed black;
}
#dele {
position:absolute;
bottom:5px;
right:10px;
}
标签：样式 inpu -- inner osi back bsp put int
原文地址：http://www.cnblogs.com/zhangwei99com/p/6666498.html
