html inline元素之间的空格

	<div id="div">
		<span>aaa</span> <span>bbb</span>
	</div>
	<div>
		<button onclick="bar();">bar</button>
	</div>

由于循环标签的问题,生成的span之间总是有空格甚至换行,导致页面渲染的时候,中间自然而然的出现了空格.
如果在页面中用js动态添加新的span元素

function bar() {
		var div = document.getElementById("div");
		var span = document.createElement("span");
		span.innerHTML = "tffft";
		div.appendChild(span);
	}

那么新生成的span元素之间是没有空格的,导致了页面的不一致.


可以在新生成的span元素后面,用createTextNode的方法,人工添加空格.

	function bar() {
		var div = document.getElementById("div");
		var span = document.createElement("span");
		span.innerHTML = "tffft";
		div.appendChild(span);
		var sp=document.createTextNode(" ");
		div.appendChild(sp);
	}

不过话又说回来了,如果就想让span与span之间没有空格呢.
把span写成

<span>aaa</span><span>bbb</span><span>ccc</span><span>ddd</span>

或者

		<span>aaa</span
		><span>bbb</span
		><span>ccc</span
		><span>ddd</span>

都没有问题,不过就怕eclipse的自动格式化代码来捣乱,况且用循环标签生成这个东西也很麻烦.
消除空格的方法可以参考
http://www.zhangxinxu.com/wordpress/?p=2357