0 前言
在 用HTML DOM实现有条件地渲染网页元素（上）_PurpleEndurer@5lcto的技术博客_51CTO博客 中，我使用HTML DOM完成了对原有代码的改造。现在我们要赋予用户更多的选择，比如允许用户输入自己喜欢的水果名称，并添加到水果名称列表中。
1 改进代码
我们将在 用HTML DOM实现有条件地渲染网页元素（上）_PurpleEndurer@5lcto的技术博客_51CTO博客的最终代码：
<script> function showFruit(e) { //var oUL = document.getElementById('ulFruit'); //alert(oUL.childElementCount); var coLi = document.getElementById('ulFruit').children; //alert(coLi.length); for (var i = 0; i < coLi.length; i++) { //alert(coLi[i].title); coLi[i].style.display = (e.target.value==coLi[i].innerText ? "list-item" : "none"); } // for } // showFruit(v) var aFruits = new Array(['苹果', 'Apple', 'red'], ['桔子', 'Orange', 'orange'], ['葡萄', 'Grape', 'purple'], ['芒果','Mango','yellow'], ['其它', 'Other', 'blue']); function genFruitOption() { var oDivFruit = document.getElementById('divFruit'); var oP;//<p>对象 var oIn;// <input>对象 var oLa;// <label>对象 for (var i=0; i<aFruits.length; i++) { //创建<p> oP = document.createElement("P"); //创建<input type="raido"> oIn = document.createElement("input"); oIn.type = 'radio'; //类型 oIn.name = "fruit"; // oIn.id = 'ra' + aFruits[i][1]; //id oIn.value = aFruits[i][0]; //值 oIn.addEventListener("click", showFruit); //增加click事件监听器 //创建<label> oLa = document.createElement('label') oLa.htmlFor = 'ra' + aFruits[i][1]; oLa.appendChild(document.createTextNode(aFruits[i][0])); //向<div>容器追加网页元素<P><input><label>对象 oDivFruit.appendChild(oP); oDivFruit.appendChild(oIn); oDivFruit.appendChild(oLa); } //for } //genFruitOption() function genFruitLi() { var oUL = document.getElementById('ulFruit'); var oLi; for (var i=0; i<aFruits.length; i++) { oLi = document.createElement("li"); oLi.appendChild(document.createTextNode(aFruits[i][0])); oLi.style.color = aFruits[i][2]; //设置颜色 oUL.appendChild(oLi); } //for } //genFruitLi() </script> <p>用JavaScript响应click事件有条件地渲染网页元素</p> <p>（引入HTML COM技术改造）</p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div> <p>你喜欢的是：</p> <ul id="ulFruit"> <script> genFruitLi(); </script> </ul>
基础上进行改进。
1.1 修改网页元素描述代码
我们只需要修改2个地方。
1.1.1 修改技术改进说明
将
<p>（引入HTML COM技术改造）</p>
改为
<p>（允许用户添加自己喜欢的水果）</p>
1.1.2 增加代码提示用户输入和添加水果名称
我们在可选水果列表代码：
<p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div>
的下方增加一段<p></p>代码，来输出3个页面元素：
一段提示用户输入水果名称的信息
一个文本框：用来给用户输入具体的水果名称
一个按钮：用来把输入的水果名称添加到水果列表中
即：
<p style="color:#0033ff"> 温馨提示：如果以上没有您喜欢的水果，您可以输入和添加喜欢的水果名称到列表中： <input type="text" id="itFruit" value=" 水果名称" /> <input type="button" value="添加" onclick="addFruit()" /> </p>
当用户点击“添加”按钮后，我们将执行addFruit函数，实现把用户输入的水果名称添加到水果列表的目标。
修改后的代码如下：
<p>用JavaScript响应click事件有条件地渲染网页元素</p> <p>（允许用户添加自己喜欢的水果）</p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div> <p style="color:#0033ff"> 温馨提示：如果以上没有您喜欢的水果，您可以输入和添加喜欢的水果名称到列表中： <input type="text" id="itFruit" value=" 水果名称" /> <input type="button" value="添加" onclick="addFruit()" /> </p> <p>你喜欢的是：</p> <ul id="ulFruit"> <script> genFruitLi(); </script> </ul>
2.2 修改JavaScript脚本
改造主要集中在JavaScript脚本这块。
2.2.1 增加addFruit函数
addFruit函数的要提供的功能是把用户输入的水果名称添加到水果列表。
由于水果列表信息是存放在数组aFruits中的，所以我们要实现的第一步是把用户输入的水果信息添加到数组aFruits中。
2.2.1.1 确定新水果放在水果列表的位置
那么用户输入的水果信息添加到水果列表中的什么位置好呢？
从技术上来说，不管是放在列表开头，还是追加到列表的末尾，亦或插入到列表中的某个位置，这些都可以实现。
从视觉上来说，如果把用户输入的水果信息放在列表开头或末尾这两头，这样会让用户更容易找到自己添加的水果。
从情理上来说，用户输入的水果信息是追加进来的，放在列表的末尾更合情理。
所以我们的选择是把用户输入的水果信息放在列表的末尾，也就是作为数组aFruits的最后一行元素。
要把数组元素追加到数组的末尾，我们可以使用数组对象的push方法。
2.2.1.2 确定新水果的id
由于数组aFruits是二维数组，每一行存储一种水果的信息，共有3个成员，分别存储了水果名称，水果的id和水果颜色。
其中：
第1个成员水果名称由用户输入。
第2个成员水果id原则上不能跟原有水果的id重复，不应由用户输入，因为用户并知道原有的水果的id是什么。
我们的解法办法是这样来定义id：以fruit开头，再接上aFruits数组的长度。
至于第3个成员水果颜色，我可以先默认为'black'或''。
2.2.1.3 更新水果列表
在把用户输入的水果信息放在列表的末尾后，我们需要更新用户可选水果列表，把用户新添加的水果显示出来，提供给用户选择。
相应的，我们也要更新展示用户选择的水果结果的列表。
实现方法就是依次调用 genFruitOption函数和 genFruitLi函数。
具体的代码如下：
function addFruit() { //获取用户添加的水果名称 var sFruit = document.getElementById('itFruit').value; //aFruits.unshift([sFruit, ('fruit'+aFruits.length) , 'black']);//把用户添加的水果名称加入数组头部，成为第1个元素 aFruits.push([sFruit, ('fruit'+aFruits.length) , 'black']);//把用户添加的水果名称加入数组尾部，成为最后一个元素 genFruitOption();//更新用户可选水果的列表 genFruitLi(); //更新展示用户选择水果的列表 }
2.2.2 修改 genFruitOption函数
genFruitOption函数的功能是生成水果列表，提供给用户进选择。
如果不做修改就反复调用，将会重复生成列表。
因此，我们需要做1个改进，就是输出新的水果列表前，要把原有列表项清除掉。
实现的方法有两种：
第一种方法简单了当，就是直接将列表容器的innerHTML置为''。
第二种方法文雅一点，就是使用HTML COM提供的parent.removeChild方法来逐一清除。
由于我们是要把原有列表项全部清除掉，而不只是清除其中一些，所以我们使用第一种方法，在genFruitOption函数中增加一行代码：
oDivFruit.innerHTML = '';//清空原有水果选项
即：
function genFruitOption() { var oDivFruit = document.getElementById('divFruit'); oDivFruit.innerHTML = '';//清空原有水果选项 var oP;//<p>对象 var oIn;// <input>对象 var oLa;// <label>对象 for (var i=0; i<aFruits.length; i++) { //创建<p> oP = document.createElement("P"); //创建<input type="raido"> oIn = document.createElement("input"); oIn.type = 'radio'; //类型 oIn.name = "fruit"; // oIn.id = 'ra' + aFruits[i][1]; //id oIn.value = aFruits[i][0]; //值 oIn.addEventListener("click", showFruit); //增加click事件监听器 //创建<label> oLa = document.createElement('label') oLa.htmlFor = 'ra' + aFruits[i][1]; oLa.appendChild(document.createTextNode(aFruits[i][0])); //向<div>容器追加网页元素<P><input><label>对象 oDivFruit.appendChild(oP); oDivFruit.appendChild(oIn); oDivFruit.appendChild(oLa); } //for } //genFruitOption()
2.2.3 修改genFruitLi函数
genFruitLi函数的功能是显示用户选择的水果。
当用户添加自己的水果后，也需要进行相应的更新。
跟修改genFruitOption函数一样，为了避免重复生成列表，我们同样需要在输出新的水果列表前，要把原有列表项清除掉。
我们在genFruitOption函数中增加一行代码：
oUL.innerHTML = ''; //清空原有水果列表项
即：
function genFruitLi() { var oUL = document.getElementById('ulFruit'); oUL.innerHTML = ''; //清空原有水果列表项 var oLi; //添加水果列表项 for (var i=0; i<aFruits.length; i++) { oLi = document.createElement("li"); oLi.appendChild(document.createTextNode(aFruits[i][0])); oLi.style.color = aFruits[i][2]; //设置颜色 oUL.appendChild(oLi); } //for } //genFruitLi()
3 改造后的最终代码
综合以上修改后的最终代码如下：
<script> function showFruit(e) { //var oUL = document.getElementById('ulFruit'); //alert(oUL.childElementCount); var coLi = document.getElementById('ulFruit').children; //alert(coLi.length); for (var i = 0; i < coLi.length; i++) { //alert(coLi[i].title); coLi[i].style.display = (e.target.value==coLi[i].innerText ? "list-item" : "none"); } // for } // showFruit(e) var aFruits = new Array(['苹果', 'Apple', 'red'], ['桔子', 'Orange', 'orange'], ['葡萄', 'Grape', 'purple'], ['芒果','Mango','yellow'], ['其它', 'Other', 'blue']); function genFruitOption() { var oDivFruit = document.getElementById('divFruit'); oDivFruit.innerHTML = '';//清空原有水果选项 var oP;//<p>对象 var oIn;// <input>对象 var oLa;// <label>对象 for (var i=0; i<aFruits.length; i++) { //创建<p> oP = document.createElement("P"); //创建<input type="raido"> oIn = document.createElement("input"); oIn.type = 'radio'; //类型 oIn.name = "fruit"; // oIn.id = 'ra' + aFruits[i][1]; //id oIn.value = aFruits[i][0]; //值 oIn.addEventListener("click", showFruit); //增加click事件监听器 //创建<label> oLa = document.createElement('label') oLa.htmlFor = 'ra' + aFruits[i][1]; oLa.appendChild(document.createTextNode(aFruits[i][0])); //向<div>容器追加网页元素<P><input><label>对象 oDivFruit.appendChild(oP); oDivFruit.appendChild(oIn); oDivFruit.appendChild(oLa); } //for } //genFruitOption() function genFruitLi() { var oUL = document.getElementById('ulFruit'); oUL.innerHTML = ''; //清空原有水果列表项 var oLi; //添加水果列表项 for (var i=0; i<aFruits.length; i++) { oLi = document.createElement("li"); oLi.appendChild(document.createTextNode(aFruits[i][0])); oLi.style.color = aFruits[i][2]; //设置颜色 oUL.appendChild(oLi); } //for } //genFruitLi() function addFruit() { //获取用户添加的水果名称 var sFruit = document.getElementById('itFruit').value; //aFruits.unshift([sFruit, ('fruit'+aFruits.length) , 'black']);//把用户添加的水果名称加入数组头部，成为第1个元素 aFruits.push([sFruit, ('fruit'+aFruits.length) , 'black']);//把用户添加的水果名称加入数组尾部，成为最后一个元素 //alert(aFruits); genFruitOption();//更新用户可选水果的列表 genFruitLi(); //更新展示用户选择水果的列表 } </script> <p>用JavaScript响应click事件有条件地渲染网页元素</p> <p>（允许用户添加自己喜欢的水果）</p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div> <p style="color:#0033ff"> 温馨提示：如果以上没有您喜欢的水果，您可以输入和添加喜欢的水果名称到列表中： <input type="text" id="itFruit" value="水果名称" /> <input type="button" value="添加" onclick="addFruit()" /> </p> <p>你喜欢的是：</p> <ul id="ulFruit"> <script> genFruitLi(); </script> </ul>
4 代码运行效果
5 小结
我们通过改进代码为用户提供了增加自己水果的功能，为了突出重点，我们没有对用户输入的水果名称进行检查，比如用户是否输入了有效的水果名称，以及输入的水果名称是否与水果选项列表中原有的重复，等等。
对于水果id这一项，为了便于识记，我们的命令原则上是用水果的英母名做为id，而不是fruit+数组aFruits的长度，因为从这样的id上我们无法看出它对应的是什么水果。
一个可以考虑的改进方向是建立一个水果信息字典，把水果的中文或英文名称，水果对应英文名称（作为id）,水果颜色存储起来，当用户输入水果的名称时，我们就在字典中查询，取得id和颜色信息。
