2
回答
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>

举报
tsl0922
发帖于6年前 2回/967阅
共有2个答案 最后回答: 6年前

别用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);
}


考虑过是不是Chrome的bug,但不确定,所以才上来问了下。谢楼上的,问题解决了~

还有,貌似clone过来的原本不是隐藏的span,设置了高度也不能正常显示,还得改下display才能显示。

顶部