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

开发者社区> 问答> 正文

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

2016-07-06 10:27:18 2566 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
相关问答

1

回答

可以将HTML页面的标题设置为“Web前端设计”的是什么呢?

2021-10-31 15:13:26 451浏览量 回答数 1

2

回答

新建html5页面把生成的<meta charset="utf-8"> 改为gb2312出现乱码

2016-06-06 15:56:11 2215浏览量 回答数 2

1

回答

如何用springMVC 返回一个指定的HTML页面?

2016-03-17 09:56:55 4877浏览量 回答数 1

1

回答

html页面无法滚动数据显示不全

2016-03-16 16:36:02 3279浏览量 回答数 1

1

回答

在页面load时,就通过判断UID来改写html?

2016-03-13 10:32:56 1983浏览量 回答数 1

1

回答

如何实现获取html页面输入框的数据

2016-03-13 13:38:26 2518浏览量 回答数 1

1

回答

在html中的meta中加了charset=utf-8后,页面就会自动的设定为utf-8字符集吗?

2016-03-13 14:20:01 2374浏览量 回答数 1

1

回答

请教个html页面里的一个参数的意思

2016-03-12 14:28:44 1606浏览量 回答数 1

1

回答

空间浏览html 的页面全部显示乱码,浏览aspx到没问题

2015-06-12 20:42:15 7969浏览量 回答数 1

4

回答

哪位帮忙做个HTML页面,备案用的,送33元代金卷

2012-09-18 13:45:38 8673浏览量 回答数 4
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载