今天利用节点完成了在页面上新增内容等东西，还可以有删除方法和替换。然后经过自己思考和查资料做出来了。
<title>Coding Coffee</title>
<style>
#bian{
width: 800px;
height: 300px;
clear:both;
margin:0 auto;
}
.img{
float:left;
width: 50%;
margin:0 auto;
}
.p{
float:right;
width: 50%;
}
p,h1,h2{
text-align:center;
}
</style>
</head>
<body>
<p>
咖啡名：<input id="name" type="text" value="">
</p>
<p>
描述：<textarea id="description" type="text" cols="20" rows="10" ></textarea>
</p>
<p>
图片地址：<input id="img_url" type="text" value="">
</p>
<button οnclick="addCoffee()">新增咖啡</button>
<div id="bian">
<h1>Coding Coffee Menu</h1>
<div class="img">
<img src="../img/c2.jpg">
</div>
<div class="p">
<h2>蓝山咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
function addCoffee(){
var name=document.getElementById('name').value;
var desc=document.getElementById('description').value;
var img_url=document.getElementById('img_url').value;
var html1 ='<div class="bian"><div class="img"><img src="'+img_url+'"></div>';
var html2='<div class="p"><h2>'+name+'</h2><p>'+desc+'</p></div>';
var html3='<div style="clear: both;"></div></div>';
var add=html1+html2+html3;
var newhtml = document.getElementById('bian').innerHTML;
var newhtml2=add+newhtml;
document.getElementById('bian').innerHTML = newhtml2;
}
</script>
</body>
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
