## web前端必学功法之一：用户选择爱好
案例实现效果：
首先做这个页面效果，我们要把页面布局给写好，每个网站做好页面可以解决很大的问题。
```html
css代码，这里的页面采用Grid布局
<style>
*{
margin: 0;
padding: 0;
border: none;
}
li{
list-style: none;
}
.container{
margin-top: 1em;
width: 100;
height: 100;
/*overflow属性规定当内容溢出元素框时，会发生的事情。auto表示如果内容被修剪，则浏览器会显示滚动条*/
overflow: auto;
/*网格布局*/
/* 指定容器采用网格布局 */
display: grid;
/* 定义网格线的名称和网格轨道的尺寸大小 fr表示片段*/
grid-template-columns: 1fr 1fr;
/* 网格项的最大内容占据网格轨道 */
grid-template-rows: max-content;
/*设置行与行之间的间隙的尺寸*/
gap: 0.5em;
}
.container .box{
padding: 1em;
}
.box .item{
margin-top: 1em;
border-top: 1px solid #333;
padding-top: 1em;
display: grid;
grid-template-columns: repeat(auto-fit,8em); /*第一个值表示：重复的次数，第二值表示：重复的值 auto-fit:自动适应*/
gap: 0.5em;
}
.item li{
padding: 0.5em;
border:1px solid #00ACED;
text-align: center;
}
.item li:hover{
cursor: pointer;
color: white;
background-color: #00ACED;
}
#selected li{
color: white;
background-color: #00ACED;
}
#selected li:hover{
color: initial;
background-color: initial;
}
</style>
html部分：
<div class="container">
<div class="box">
<h2>从下面选择爱好</h2>
<ul id="unselected" class="item">
<li>摄影</li>
<li>编程</li>
<li>游戏</li>
<li>文学</li>
<li>旅游</li>
<li>篮球</li>
<li>足球</li>
</ul>
</div>
<div class="box">
<h2>你的爱好：</h2>
<ul id="selected" class="item">
</ul>
</div>
</div>
```
下面就是js部分：
```javascript
<script>
//appendChild: 向父元素中添加一个元素时，以前的位置会被删除，添加的元素会出现在新的位置
//首先获取ul元素
var ulSelect = document.querySelector("#selected");
var ul = document.querySelector("#unselected");
//绑定监听事件
ul.addEventListener('click',function(ev){
//判断是否有子元素，防止一次多选择
if(ev.target.childElementCount == 0)
ulSelect.appendChild(ev.target)
},false)
ulSelect.addEventListener('click',function(ev){
if(ev.target.childElementCount == 0) ul.appendChild(ev.target);
},false)
</script>
```
## 用户选择爱好总结：
1.做好这个页面效果并不难，重要的把页面的布局给做好
2.然后我们要知道appendChild（）方法的属性，用那些作用
3.appendChild: 向父元素中添加一个元素时，以前的位置会被删除，添加的元素会出现在新的位置
4.事件的监听addEventListener(参数1，参数2，参数3)，参数1：事件类型，这个事件类型不加on，参数2：回调函数；参数3：false代表事件冒泡，true代表事件捕获。