На первый случай)
Но вот тут есть варианты по интереснее -
https://learn.javascript.ru/modifying-document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="multi">
<div id="list2"></div>
<div>
<span class="btn" onclick="multi();"><<<</span>
<span class="btn" onclick="multiDel();">>>>></span>
</div>
<div class="points">
<ul class='list'>
<li class="li">lorem1</li>
<li class="li">lorem2</li>
<li class="li">lorem3</li>
<li class="li">lorem4</li>
<li class="li">lorem5</li>
<li class="li">lorem6</li>
<li class="li">lorem7</li>
<li class="li">lorem8</li>
<li class="li">lorem9</li>
<li class="li">lorem10</li>
</ul>
</div>
</div>
<script>
var activ;
function jq(){
var items = document.querySelectorAll('.multi .li');
for(var i = 0; i < items.length; i++){
items[i].onclick = activeItem;
}
function activeItem(){
this.classList.toggle('active');
activ = this;
}
}
function multi(){
var div = document.createElement('li');
div.className = 'li';
div.innerHTML = activ.innerHTML;
list2.appendChild(div);
jq();
}
function multiDel(){
activ.parentNode.removeChild(activ);
}
jq();
</script>
<style>
body, html{
min-height: 100%;
height: 100%;
margin:0;
}
.multi{
height: 100%;
width: 800px;
margin:0 auto;
}
.multi div{height: 100%;
float:left;
width: 33%;
border-right: 1px solid #ccc;
}
.list li{
padding:10px;
cursor:pointer;
}
.list li:hover{
background: #ccc;
}
#list2 li{
padding:10px;
cursor:pointer;
}
#list2 li:hover{
background: #ccc;
}
.btn{
padding:10px;
margin:40px;
background: #f1f1f1;
border:1 px solid #ccc;
border-radius:5px;
display:block;
}
.btn:hover{
background: #ccc;
cursor:pointer;
}
.active{
background: #ccc;
color:blue;
}
</style>
</body>
</html>
