Page 27 - JavaScript修炼之道

14 第二部分 DOM、事件及定时器

任务 6 修改元素的内容

你可能会问，为什么不通过设置innerHTML属性来修改该元素的内容呢？

直接把指定的超文本赋给容器元素的innerHTML属性，这样看起来很有吸引力。确实，这样
做会迅速获得几个数量级的速度提升。但是，在许多浏览器中，一些不规范的超文本可能会导致
innerHTML属性失效，而库则会在需要的情况下使用其他机制（比如手动DOM构建或超文本预
处理）来保证超文本能顺利插入。当使用内容注入而非全部的内容替换，或者是包含内联脚本的
超文本时（接下来的段落中将会讨论这一内容），使用库更加方便、简洁，并且不容易出错（相
对与手动操作超文本而言）。

注意，不要混淆替换（updating）和更新（replacing）这两个操作。大多数方法默认执行的
是更新操作——举例来说， dojo.place()方法中的only位置。更新操作会改变元素内部的内容，
而替换操作则会改变元素自身，因此可能会导致元素的ID和与之关联的事件监听器失效。替换
操作实际上和设置outerHTML属性相等价。

幸运的是，一些库提供了一系列特殊方法来辅助基本的更新/插入操作，比如元素包装、基
于选择器的多元素操作以及清除多余的空文本节点等。因此，请务必阅读你常用的库的API文档，
以了解更多细节。

不过，如果要注入<script>标签，那你可得小心了。因为根据默认设置，本地注入的超文
本中内嵌的<script>标签中的脚本并不会运行，有时这可能会导致一些问题，所以如果可能的
话，尽量利用事件代理 实现等同的功能。不过，由于这个需求是如此普遍，一些库已经提供了
①
相应的机制。

 Prototype的update()、 replace()和insert()方法默认会运行内联的<script>标签中的
脚本（为了Ajax更新，需将evalScripts选项设为true）。
 jQuery的html()方法默认也会执行内联的脚本。
 Ext的update()方法，把第二个参数设置为true，以运行内联的脚本。

出于安全方面的考虑，这些待运行的脚本有时可能会在一个特殊的执行上下文中运行。请阅
读你常用的库的文档，以获得更多的细节。

——————————
① 阅读任务9以获得更多细节。