Page 28 - JavaScript修炼之道

任务6 修改元素的内容 15

更新元素的全部内容

// Prototype
$(element).update('<p>new internal HTML</p>')
$(element).replace('<p>This will replace the element itself</p>')
// jQuery
$(element).html('<p>new internal HTML</p>')
$(element).text('The <div> and <span> elements carry no inherent semantics.')
// MooTools
$(element).set('html', '<p>new internal HTML</p>')
$(element).set('text', 'The semantics of << and >> varies across languages.')
// YUI 3
Y.one('#id').setContent('<p>new internal HTML</p>')
// Dojo
dojo.place('<p>new internal HTML</p>', element, 'only')
dojo.place('<p>This will replace the element itself</p>', element, 'replace')
// Ext JS
Ext.get(element).update('<p>new internal HTML</p>')

请注意，jQuery和MooTools使用了特殊的更新机制，来对传入文本中的标签进行转义，这使
得在页面展示代码变得很方便。
向元素中注入其他内容

// Prototype。位置包括: 'before'，'top'，'bottom'，'after'
$(element).insert('<p>This gets at bottom</p>')
$(element).insert({ pos: markup, pos2: markup2... })
// jQuery (提供了大量的方法来控制插入的位置)
$(element).before('<p>This gets before the element</p>')
$(element).prepend('<p>This gets at top</p>')
$(element).append('<p>This gets at bottom</p>')
$(element).after('<p>This gets after the element</p>')
// YUI 3
Y.one('#id').prepend('<p>This gets at top</p>')
Y.one('#id').append('<p>This gets at top</p>')
Y.one('#id').insert('<p>This gets where told</p>', nextChildElement)
Y.one('#id').insert('<p>This gets where told</p>', childIndex)
// Dojo。位置包括: 'before'，'first'，'last'，'after'
dojo.place('<p>This gets where told</p>', element, pos)
// Ext JS。位置包括: 'beforeBegin'，'afterBegin'，'beforeEnd'，'afterEnd'
Ext.get(element).insertHtml(pos, '<p>This gets where told</p>')

相关任务

 任务5。