select元素的options.add 与 insertbefore的区别

之前提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,比如在设置其selectedIndex属性时,会看到当前被选中的Item,浏览器重新绘画了这个元素。在某些情况下会出现这样的情况:用insertBefore方法添加了多个选项后,设置其selectedIndex不能起到效果,用options.add则不会。他们到底有什么区别呢? 

测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

</head>

<body onload="f()">

<select id="s">

    

</select>

</body>



<script>

function f(){

    for(var i=0; i<10; i++){

        var option = document.createElement('option')

        //s.insertBefore(option)

        s.options.add(option)

        option.innerText = 'hello' + i

        option.value = i

    }

    s.selectedIndex = 4

}

</script>

</html>

总结:这也算一个有点奇妙的问题吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

WAI-ARIA无障碍网页应用属性完全展示

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏...

2584
来自专栏LeoXu的博客

Flex笔记_处理用户输入 原

        Label、RichText、RichEditableText、TextInput、TextArea、RichTextEditor(MX)

732
来自专栏xx_Cc的学习总结专栏

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

5096
来自专栏编程

前端学习自学笔记:day03

嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. ? 在此之前先为大家显示下前端工程师的路线图: 第三天...

1925
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

1064
来自专栏杨逸轩 ' sBlog

元旦快乐 – 使用snow.js增加下雪效果

3434
来自专栏互联网开发者交流社区

最新jquery+easyui_api培训文档

1254
来自专栏web编程技术分享

HTML&CSS Table元素详细解说

3768
来自专栏卡少编程之旅

Vue进阶部分文档研读和学习

3107
来自专栏黑泽君的专栏

day40_jQuery学习笔记_01

day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

1152

扫码关注云+社区

领取腾讯云代金券