<html>
<script>
function test() {
var childRet = document.getElementById('sel');
for (var i = childRet.childNodes.length-1; i >= 0; i--) {
childRet.removeChild(childRet.childNodes.item(i));
}
var tmpRet = {
"DATA": {"name": "saj", "pass": "abc", "X": "X"}
};
var ret = document.createDocumentFragment();
var tmpObj = tmpRet["DATA"];
for (var key in tmpObj)
{
if(key != "X") {
var newop = document.createElement("option");
newop.id = key;
newop.value = key;
newop.appendChild(document.createTextNode(tmpObj[key]));
ret.appendChild(newop);
}
}
document.getElementById('sel').appendChild(ret);
}
</script>
<body>
<form>
<select id="sel">
<option>aa</option>
<option>bb</option>
</select>
<input type="button" onclick="test()" value="childNodes"/>
</form>
</body>
</html>
以上已经在IE测试通过
原来select内容是aa,bb,点按钮后内容变成saj,abc
document.createDocumentFragment
添加节点的时候使用
对于少量的更新，可以不使用
然而，当要添加大量数据时，如果逐个添加这些节点，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。
假设你想创建十个新段落。你可能这样写
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script defer>
var arrText = ["1", "2", "3","4", "5","6","7","8","9","10"];
for ( var i = 0; i < arrText.length ;i++ )
{
var op = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
</script>
<BODY>
</BODY>
</HTML>
这段代码运行良好，但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时，文档碎片会更高效：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script defer>
var arrText = ["1", "2", "3","4", "5","6","7","8","9","10"];
var oFrag = document.createDocumentFragment();
for ( var i = 0; i < arrText.length ;i++ )
{
var op = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
</script>
<BODY>
</BODY>
</HTML>
分享到：
相关推荐
例如，可以创建一个`<div>`，使其看起来像下拉列表，然后使用`:before`或`:after`伪元素来显示`<option>`的内容。 对于不希望引入额外库或使用JavaScript的场景，可以尝试调整`<select>`元素的`width`属性。但是，...
根据给定的信息，本文将详细解释JavaScript代码片段中涉及的关键概念和技术细节，这些技术主要用于处理HTML页面中的下拉列表框。 ### 一、JavaScript与HTML交互基础 在深入解析这段代码之前，我们先来了解一些基本...
### JQuery关于下拉列表的操作 在Web开发中，下拉列表是用户界面中常见的交互元素之一，用于提供一系列选项供用户选择。通过JQuery库，我们可以轻松地与这些下拉列表进行交互，实现诸如获取选中值、设置选中项等...
在网页设计中，Ajax（Asynchronous JavaScript and XML）技术被广泛用于实现动态交互效果，其中“Ajax 动态提示下拉列表”是一个常见的应用场景。这种功能允许用户在输入框中输入字符时，通过Ajax请求从服务器获取...
5. **更新UI**：用新生成的选项替换二级下拉列表的现有内容，使用户看到级联效果。 具体代码示例（使用jQuery和Ajax）： ```html <!-- HTML --> <!-- 省份选项 --> <!-- 城市选项 --> ...
在网页开发中，实现省市县下拉列表联动是一种常见的需求，尤其在填写地址或选择地理位置时。...无论使用哪种方式，实现省市县联动的核心思路是一致的：监听上一级选择的变化，动态加载和更新下拉列表。
根据标题和描述，我们可以推测这是一个关于使用Uibot处理下拉列表框的中级实践练习，其中ABC三个空需要填写相应的Uibot语句来实现功能。 首先，我们需要了解Uibot中处理下拉列表框的基本方法。Uibot提供了`选择`...
这种方法在处理动态获取的数据时非常有用，比如从服务器端获取数据后填充下拉列表。 除了`append()`，还有其他方法可以实现类似功能。例如，`html()`方法可以替换元素内所有的子节点，而`before()`或`after()`则...
由于直接修改`<select>`的样式受限，我们可以使用`<div>`或者其他元素模拟下拉列表，并通过JavaScript进行交互处理。这种方法称为“自定义下拉菜单”或“下拉列表替换”。这需要结合CSS伪类、`:hover`、`:focus`等来...
例如，可以使用虚拟滚动技术只渲染视口内的选项，或者在下拉列表展开前先加载数据，以减少初次渲染时的延迟。 7. **自定义事件和扩展** 对于复杂的业务逻辑，你可能需要添加自定义事件监听器，以便在用户选择某个...
本文将详细介绍如何使用JavaScript实现一个模拟下拉列表的特效。 首先，让我们了解HTML的`<select>`元素和`<option>`元素。`<select>`用于创建一个下拉列表，用户可以从提供的选项中选择一个。`<option>`元素则定义...
在这个场景中，用户首先从一个下拉列表选择国家，接着根据选定的国家，第二个下拉列表会动态更新为相应国家的城市，最后，当城市被选中时，第三个下拉列表会显示该城市的乡镇。这样的设计可以提供一种直观且高效的...
`<option>`元素定义了下拉列表中的一个选项。例如： ```html <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> ``` 但是，...
综上所述，通过结合JavaScript和CSS，我们可以对`select`下拉列表选择框进行深度美化，包括调整基本样式、添加自定义图片，甚至实现复杂的交互效果。在`select美化选择框.htm`这个示例文件中，我们可以看到一个完整...
首先，我们需要创建ASP页面，包含一个下拉列表和必要的JavaScript代码。下拉列表可以通过HTML `<SELECT>` 标签来创建，每个选项则由 `<OPTION>` 标签定义。例如： ```html ()"> <option value="value1">Option 1</...
在这个项目中，jQuery被用来替换或增强HTML的`<select>`和`<option>`元素，创建出具有定制化外观和行为的下拉列表。 在实际应用中，这个自定义选择框可能包括以下特点： 1. **美化样式**：通过CSS自定义样式，可以...
这个文件通常会包含jQuery函数，用于监听`<select>`元素的事件，并执行相应的美化操作，比如用自定义的HTML结构替换原生的`<option>`，并添加动态效果。 通过这种方式，开发者可以创造出一个既实用又美观的下拉列表...
首先，`<option>`标签用于创建下拉列表中的选项。它有两个关键属性： 1. `value`：这个属性定义了选项的值，通常用于服务器端处理或作为数据传递。例如，在`<option value="value-a">text-a</option>`中，`value-a`...
本文将深入探讨如何使用jQuery UI库来创建功能丰富的下拉列表选择菜单，同时提供一份实际可运行的代码示例，帮助开发者更好地理解和应用这一技术。 jQuery UI 是一个基于jQuery库的扩展，提供了丰富的用户界面组件...
在开发web页面时，下拉列表框（SELECT元素）是经常被使用的表单元素之一，它允许用户从预定义的选项中选择一项或多项。在实际应用中，我们可能会遇到需要对SELECT下拉列表进行复杂操作的情况，比如实现多选、移除或...