<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动态创建HTML实践</title>
<style type="text/css">
.container{
width:800px;
margin:20px auto;
}
.all{
width:300px;
height: 450px;
border:1px solid blue;
float:left;
}
.selected{
width: 300px;
height: 450px;
border:1px solid green;
float:left;
margin-left:20px;
}
.input{
margin:10px;
font-size: 1.2em;
}
h1{
border-bottom:2px solid black;
}
ul{
padding:2px;
}
ul li{
list-style: none;
margin-top:4px;
margin-left:2px;
border:1px solid brown;
background-color: beige;
font-size:2em;
cursor: pointer;
}
</style>
<script>
function gettext()
{
var gtext=document.getElementById("fruitInput").value;
var l1ch=document.createElement("li");
var l1=document.getElementById("allFruits");
l1.appendChild(l1ch);
var gtext1=document.createTextNode(gtext);
l1ch.appendChild(gtext1);
}
window.onload=function()
{
getin();
ret();
function getin()
{
var list1=document.getElementById("allFruits");
var ch1= document.getElementById("allFruits").getElementsByTagName("li");
for(i=0;i<ch1.length;i++)
{
ch1[i].onclick = function()
{
var ul2ch=document.createElement("li");
var ul2=document.getElementById("selectedFruits");
ul2.appendChild(ul2ch);
var get=this.innerHTML;
var text=document.createTextNode(get);
ul2ch.appendChild(text);
list1.removeChild(this);
}
}
}
function ret()
{
var list2=document.getElementById("selectedFruits");
var ch2= document.getElementById("selectedFruits").getElementsByTagName("li");
for(i=0;i<ch2.length;i++)
{
ch2[i].onclick = function()
{
var a1=document.createElement("li");
var a2=document.getElementById("allFruits");
a2.appendChild(a1);
var get=this.innerHTML;
var text=document.createTextNode(get);
alert(this.innerHTML);
a1.appendChild(text);
list2.removeChild(this);
}
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="input">
<label for="fruitInput" >输入新的水果：</label>
<input id="fruitInput" type="text" />
<input id="btnInput" type="button" value="确认输入" onclick="gettext()">
</div>
<div class="all">
<h1>所有水果</h1>
<ul id="allFruits">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
<li>柚子</li>
<li>西瓜</li>
<li>哈密瓜</li>
</ul>
</div>
<div class="selected">
<h1>我喜欢的水果</h1>
<ul id="selectedFruits">
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
代码的目的是点击左边的水果会让水果到右边去，然后点击右边的水果又会让它回来，但是试验发现点击左边的可以过去，但是点击右边的却回不来。从文本框输入的水果，点击之后也过不去。有没有大佬解释一下哪里错了，我感觉这个代码逻辑有问题，但是不知道具体哪里有问题。
