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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-07-06 10:27:18 2638 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中,表示页面背景的是<body bgcolor=>。这种说法对吗?

2021-11-22 23:12:17 378浏览量 回答数 1

1

回答

在HTML中,表示页面背景的是哪个呢?

2021-10-29 20:20:14 164浏览量 回答数 1

2

回答

html 跳转页面 js代码怎么写

2018-05-10 19:59:58 1076浏览量 回答数 2

1

回答

chrome firefox 什么插件能检测HTML页面标签错误具体情况,比如<span></spam>,后面的标签写错了,插件马上就能标注

2016-06-15 11:22:21 1945浏览量 回答数 1

1

回答

HTML5 手机页面 输入表单被键盘遮挡住了

2016-06-07 09:35:21 2780浏览量 回答数 1

3

回答

jQuery如何获取HTML页面里的一些文本?

2016-06-02 17:09:07 2211浏览量 回答数 3

1

回答

问 如何在html页面动态生成图片然后分享至微博?

2016-05-30 13:21:07 2103浏览量 回答数 1

1

回答

html页面查询效率低下是什么原因?

2016-03-16 09:01:35 1649浏览量 回答数 1

1

回答

asp,net 如何读取html文件并显示在页面上?html文件地址是从数据库查询得到的?

2016-03-13 08:23:40 2664浏览量 回答数 1

1

回答

HTML设置页面内部的特定目标的链接

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