用HTML DOM实现有条件地渲染网页元素(下)

简介: 用HTML DOM实现有条件地渲染网页元素(下)

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 代码运行效果

image.png

5 小结

我们通过改进代码为用户提供了增加自己水果的功能,为了突出重点,我们没有对用户输入的水果名称进行检查,比如用户是否输入了有效的水果名称,以及输入的水果名称是否与水果选项列表中原有的重复,等等。

对于水果id这一项,为了便于识记,我们的命令原则上是用水果的英母名做为id,而不是fruit+数组aFruits的长度,因为从这样的id上我们无法看出它对应的是什么水果。

一个可以考虑的改进方向是建立一个水果信息字典,把水果的中文或英文名称,水果对应英文名称(作为id),水果颜色存储起来,当用户输入水果的名称时,我们就在字典中查询,取得id和颜色信息。


相关文章
|
4月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
111 15
|
4月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
124 19
|
4月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
114 2
|
6月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
222 4
|
6月前
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
362 0
HTML5实现好看的中秋节网页源码
|
7月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
236 3
|
7月前
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
8月前
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
9月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
351 22
|
9月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
353 2
利用 html_table 函数轻松获取网页中的表格数据