Chrome浏览器HTML DOM插入节点问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

Chrome浏览器HTML DOM插入节点问题

2016-07-06 10:27:18 2488 1

这两天做一个项目测试页面时发现Chrome浏览器下DOM节点插入有点问题,没有解决,求JS高手帮忙看看问题出在哪.

下面的JS代码,IE8,FireFox下均能正常插入节点,唯独Chrome不行。

其实也不是不能插入,点击按钮后实际上节点已经添加了,打开开发人员工具后就可以显示 插入过的节点,然后也能正常 插入 了,很是诡异~

为测试是不是Jquery的问题,下面又用纯HTML DOM API写了个 插入节点的函数,结果还是一样。

测试HTML如下:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript">
        function add_option(pos) {
            $new_option = $("#templete").clone();
            $new_option.removeAttr("id");
            $new_option.removeAttr("style");
            $target = $(pos).parent("span");
            $target.before($new_option);
        }
        function add_option1(pos) {
            var new_node = document.getElementById("templete").cloneNode(true);
            new_node.removeAttribute("id");
            new_node.style.display = '';
            document.getElementById("container").insertBefore(new_node,document.getElementById("base"));
        }
        function del_option(option) {
            $(option).parent("span").remove();
        }
    </script>
</head>
<body>
    <div id="container">
    <span id="templete" style="display:none;">
        <input tabindex="10" type="text" style="margin-top: 5px;" size="60" />
        <a href="javascript:;" onclick="del_option(this);">del</a><br>
    </span>
    <span>
        <input tabindex="10" type="text" style="margin-top: 5px;" size="60" /><br>
    </span>
    <span id="base">
        <a href="javascript:;" onclick="add_option(this);" />add</a>
    <a href="javascript:;" onclick="add_option1(this);" />add1</a>
    </span>
    </div>
</body>
</html>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:51:54

    别用span 用div

    这个bug是由于chrome默认渲染div里的span的行高是0造成的,你得手动调整。
    如果你不能修改tag,就手动设置行高吧

    function add_option(pos) {
        $new_option = $("#templete").clone();
        $new_option.removeAttr("id");
        $new_option.css("display", "block");
        $new_option.css("line-height", "1em");
        $target = $(pos).parent("span");
        $target.before($new_option);
    }
    0 0
相关问答

4

回答

请教一个范围查询的问题

小文文文 2019-06-14 14:37:01 116849浏览量 回答数 4

10

回答

【精品问答合集】Hbase热门问答

hbase小能手 2019-05-29 14:37:26 123944浏览量 回答数 10

35

回答

AliDDNS基于云解析API的DDNSC

dtsdao 2016-07-23 20:07:29 88953浏览量 回答数 35

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 160123浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96779浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 149083浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148298浏览量 回答数 31

82

回答

OSS入门教程

belle.zhoux 2014-07-07 17:14:27 160370浏览量 回答数 82

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 310568浏览量 回答数 251

62

回答

磁盘原地扩容功能4月22日正式上线

艳馨 2015-04-21 23:40:33 97280浏览量 回答数 62
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载