给页面上的容器追加文本的方法

喜欢用直接改写innerHTML的方法来给容器追加文本内容，例如：

var el = document.getElementById(‘myid’);
el.innerHTML += ‘要追加的文本内容’;

这样写当然是方便的，但是这是最好的方法吗？
之前在IE下踩过一个“坑”，那就是当IE下的页面里pre标记或者textarea标记的innerHTML被改写的时候，它们的格式会丢失。这是浏览器的bug吗？如果你非要去弄清原因的话，我认为这其实是因为IE解析html的document_fragment规则造成的，不能说这是bug（FF和其他浏览器显然有它们自己的想法）。除了pre和textarea两个标记的问题之外，innerHTML还有另一个问题，就是它的执行效率其实并不高。
那么，一个可能遇到问题且效率不高的用法，有没有改进空间呢？答案是有的。事实上在容器内追加纯文本时，最佳的方法并不是使用innerHTML，而是使用DOM的TextNode（理论上IE还有一个非标准的innerText属性，但它显然不在我们的考虑范围内）。例如：

var el = document.getElementById(‘myid’);
el.appendChild(document.createTextNode( ‘要追加的文本内容’));

和直接修改innerHTML相比，追加TextNode节点的方式除了速度快并且格式正确之外，还有自动替换html标记的好处（这也就是说，对于纯文本的前端展示，并不需要额外的处理函数，只要将它放入TextNode中，就一定是安全的）。最后我们可以用一个简单的例子结束我们的话题：

<style type="text/css">
textarea{
width:100%;
height:100px;
}
</style>
<textarea id="t">
abc
def
</textarea>
<textarea id="t2">
abc
def
</textarea>

<pre id="p">
abc
def
</pre>
<pre id="p2">
abc
def
</pre>

<textarea id="i">要插入的内容</textarea>
<button onclick="insert()">插入</button>

<script>
function insert(){
t.innerHTML += i.value;
p.innerHTML += i.value;
t2.appendChild(document.createTextNode(i.value));
p2.appendChild(document.createTextNode(i.value));
}
</script>