Chrome浏览器HTML DOM插入节点问题
这两天做一个项目测试页面时发现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
条回答
写回答
写回答
-
别用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); }2019-07-17 19:51:54赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
相关课程
更多
推荐问答
