Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / DomHelper.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-core-DomHelper'>/**
19 </span> * @class Ext.core.DomHelper
20  * &lt;p&gt;The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
21  * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
22  * from your DOM building code.&lt;/p&gt;
23  *
24  * &lt;p&gt;&lt;b&gt;&lt;u&gt;DomHelper element specification object&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
25  * &lt;p&gt;A specification object is used when creating elements. Attributes of this object
26  * are assumed to be element attributes, except for 4 special attributes:
27  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
28  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;tag&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The tag name of the element&lt;/div&gt;&lt;/li&gt;
29  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;children&lt;/tt&gt;&lt;/b&gt; : or &lt;tt&gt;cn&lt;/tt&gt;&lt;div class=&quot;sub-desc&quot;&gt;An array of the
30  * same kind of element definition objects to be created and appended. These can be nested
31  * as deep as you want.&lt;/div&gt;&lt;/li&gt;
32  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;cls&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The class attribute of the element.
33  * This will end up being either the &quot;class&quot; attribute on a HTML fragment or className
34  * for a DOM node, depending on whether DomHelper is using fragments or DOM.&lt;/div&gt;&lt;/li&gt;
35  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;html&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The innerHTML for the element&lt;/div&gt;&lt;/li&gt;
36  * &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
37  * &lt;p&gt;&lt;b&gt;NOTE:&lt;/b&gt; For other arbitrary attributes, the value will currently &lt;b&gt;not&lt;/b&gt; be automatically
38  * HTML-escaped prior to building the element's HTML string. This means that if your attribute value
39  * contains special characters that would not normally be allowed in a double-quoted attribute value,
40  * you &lt;b&gt;must&lt;/b&gt; manually HTML-encode it beforehand (see {@link Ext.String#htmlEncode}) or risk
41  * malformed HTML being created. This behavior may change in a future release.&lt;/p&gt;
42  *
43  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Insertion methods&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
44  * &lt;p&gt;Commonly used insertion methods:
45  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
46  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #append}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
47  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertBefore}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
48  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertAfter}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
49  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #overwrite}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
50  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #createTemplate}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
51  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertHtml}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
52  * &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
53  *
54  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Example&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
55  * &lt;p&gt;This is an example, where an unordered list with 3 children items is appended to an existing
56  * element with id &lt;tt&gt;'my-div'&lt;/tt&gt;:&lt;br&gt;
57  &lt;pre&gt;&lt;code&gt;
58 var dh = Ext.core.DomHelper; // create shorthand alias
59 // specification object
60 var spec = {
61     id: 'my-ul',
62     tag: 'ul',
63     cls: 'my-list',
64     // append children after creating
65     children: [     // may also specify 'cn' instead of 'children'
66         {tag: 'li', id: 'item0', html: 'List Item 0'},
67         {tag: 'li', id: 'item1', html: 'List Item 1'},
68         {tag: 'li', id: 'item2', html: 'List Item 2'}
69     ]
70 };
71 var list = dh.append(
72     'my-div', // the context element 'my-div' can either be the id or the actual node
73     spec      // the specification object
74 );
75  &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
76  * &lt;p&gt;Element creation specification parameters in this class may also be passed as an Array of
77  * specification objects. This can be used to insert multiple sibling nodes into an existing
78  * container very efficiently. For example, to add more list items to the example above:&lt;pre&gt;&lt;code&gt;
79 dh.append('my-ul', [
80     {tag: 'li', id: 'item3', html: 'List Item 3'},
81     {tag: 'li', id: 'item4', html: 'List Item 4'}
82 ]);
83  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
84  *
85  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Templating&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
86  * &lt;p&gt;The real power is in the built-in templating. Instead of creating or appending any elements,
87  * &lt;tt&gt;{@link #createTemplate}&lt;/tt&gt; returns a Template object which can be used over and over to
88  * insert new elements. Revisiting the example above, we could utilize templating this time:
89  * &lt;pre&gt;&lt;code&gt;
90 // create the node
91 var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
92 // get template
93 var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
94
95 for(var i = 0; i &lt; 5, i++){
96     tpl.append(list, [i]); // use template to append to the actual node
97 }
98  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
99  * &lt;p&gt;An example using a template:&lt;pre&gt;&lt;code&gt;
100 var html = '&lt;a id=&quot;{0}&quot; href=&quot;{1}&quot; class=&quot;nav&quot;&gt;{2}&lt;/a&gt;';
101
102 var tpl = new Ext.core.DomHelper.createTemplate(html);
103 tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', &quot;Ed&amp;#39;s Site&quot;]);
104 tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', &quot;Dustin&amp;#39;s Site&quot;]);
105  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
106  *
107  * &lt;p&gt;The same example using named parameters:&lt;pre&gt;&lt;code&gt;
108 var html = '&lt;a id=&quot;{id}&quot; href=&quot;{url}&quot; class=&quot;nav&quot;&gt;{text}&lt;/a&gt;';
109
110 var tpl = new Ext.core.DomHelper.createTemplate(html);
111 tpl.append('blog-roll', {
112     id: 'link1',
113     url: 'http://www.edspencer.net/',
114     text: &quot;Ed&amp;#39;s Site&quot;
115 });
116 tpl.append('blog-roll', {
117     id: 'link2',
118     url: 'http://www.dustindiaz.com/',
119     text: &quot;Dustin&amp;#39;s Site&quot;
120 });
121  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
122  *
123  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Compiling Templates&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
124  * &lt;p&gt;Templates are applied using regular expressions. The performance is great, but if
125  * you are adding a bunch of DOM elements using the same template, you can increase
126  * performance even further by {@link Ext.Template#compile &quot;compiling&quot;} the template.
127  * The way &quot;{@link Ext.Template#compile compile()}&quot; works is the template is parsed and
128  * broken up at the different variable points and a dynamic function is created and eval'ed.
129  * The generated function performs string concatenation of these parts and the passed
130  * variables instead of using regular expressions.
131  * &lt;pre&gt;&lt;code&gt;
132 var html = '&lt;a id=&quot;{id}&quot; href=&quot;{url}&quot; class=&quot;nav&quot;&gt;{text}&lt;/a&gt;';
133
134 var tpl = new Ext.core.DomHelper.createTemplate(html);
135 tpl.compile();
136
137 //... use template like normal
138  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
139  *
140  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Performance Boost&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
141  * &lt;p&gt;DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
142  * of DOM can significantly boost performance.&lt;/p&gt;
143  * &lt;p&gt;Element creation specification parameters may also be strings. If {@link #useDom} is &lt;tt&gt;false&lt;/tt&gt;,
144  * then the string is used as innerHTML. If {@link #useDom} is &lt;tt&gt;true&lt;/tt&gt;, a string specification
145  * results in the creation of a text node. Usage:&lt;/p&gt;
146  * &lt;pre&gt;&lt;code&gt;
147 Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
148  * &lt;/code&gt;&lt;/pre&gt;
149  * @singleton
150  */
151 Ext.ns('Ext.core');
152 Ext.core.DomHelper = function(){
153     var tempTableEl = null,
154         emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
155         tableRe = /^table|tbody|tr|td$/i,
156         confRe = /tag|children|cn|html$/i,
157         tableElRe = /td|tr|tbody/i,
158         endRe = /end/i,
159         pub,
160         // kill repeat to save bytes
161         afterbegin = 'afterbegin',
162         afterend = 'afterend',
163         beforebegin = 'beforebegin',
164         beforeend = 'beforeend',
165         ts = '&lt;table&gt;',
166         te = '&lt;/table&gt;',
167         tbs = ts+'&lt;tbody&gt;',
168         tbe = '&lt;/tbody&gt;'+te,
169         trs = tbs + '&lt;tr&gt;',
170         tre = '&lt;/tr&gt;'+tbe;
171
172     // private
173     function doInsert(el, o, returnElement, pos, sibling, append){
174         el = Ext.getDom(el);
175         var newNode;
176         if (pub.useDom) {
177             newNode = createDom(o, null);
178             if (append) {
179                 el.appendChild(newNode);
180             } else {
181                 (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
182             }
183         } else {
184             newNode = Ext.core.DomHelper.insertHtml(pos, el, Ext.core.DomHelper.createHtml(o));
185         }
186         return returnElement ? Ext.get(newNode, true) : newNode;
187     }
188     
189     function createDom(o, parentNode){
190         var el,
191             doc = document,
192             useSet,
193             attr,
194             val,
195             cn;
196
197         if (Ext.isArray(o)) {                       // Allow Arrays of siblings to be inserted
198             el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
199             for (var i = 0, l = o.length; i &lt; l; i++) {
200                 createDom(o[i], el);
201             }
202         } else if (typeof o == 'string') {         // Allow a string as a child spec.
203             el = doc.createTextNode(o);
204         } else {
205             el = doc.createElement( o.tag || 'div' );
206             useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
207             for (attr in o) {
208                 if(!confRe.test(attr)){
209                     val = o[attr];
210                     if(attr == 'cls'){
211                         el.className = val;
212                     }else{
213                         if(useSet){
214                             el.setAttribute(attr, val);
215                         }else{
216                             el[attr] = val;
217                         }
218                     }
219                 }
220             }
221             Ext.core.DomHelper.applyStyles(el, o.style);
222
223             if ((cn = o.children || o.cn)) {
224                 createDom(cn, el);
225             } else if (o.html) {
226                 el.innerHTML = o.html;
227             }
228         }
229         if(parentNode){
230            parentNode.appendChild(el);
231         }
232         return el;
233     }
234
235     // build as innerHTML where available
236     function createHtml(o){
237         var b = '',
238             attr,
239             val,
240             key,
241             cn,
242             i;
243
244         if(typeof o == &quot;string&quot;){
245             b = o;
246         } else if (Ext.isArray(o)) {
247             for (i=0; i &lt; o.length; i++) {
248                 if(o[i]) {
249                     b += createHtml(o[i]);
250                 }
251             }
252         } else {
253             b += '&lt;' + (o.tag = o.tag || 'div');
254             for (attr in o) {
255                 val = o[attr];
256                 if(!confRe.test(attr)){
257                     if (typeof val == &quot;object&quot;) {
258                         b += ' ' + attr + '=&quot;';
259                         for (key in val) {
260                             b += key + ':' + val[key] + ';';
261                         }
262                         b += '&quot;';
263                     }else{
264                         b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '=&quot;' + val + '&quot;';
265                     }
266                 }
267             }
268             // Now either just close the tag or try to add children and close the tag.
269             if (emptyTags.test(o.tag)) {
270                 b += '/&gt;';
271             } else {
272                 b += '&gt;';
273                 if ((cn = o.children || o.cn)) {
274                     b += createHtml(cn);
275                 } else if(o.html){
276                     b += o.html;
277                 }
278                 b += '&lt;/' + o.tag + '&gt;';
279             }
280         }
281         return b;
282     }
283
284     function ieTable(depth, s, h, e){
285         tempTableEl.innerHTML = [s, h, e].join('');
286         var i = -1,
287             el = tempTableEl,
288             ns;
289         while(++i &lt; depth){
290             el = el.firstChild;
291         }
292 //      If the result is multiple siblings, then encapsulate them into one fragment.
293         ns = el.nextSibling;
294         if (ns){
295             var df = document.createDocumentFragment();
296             while(el){
297                 ns = el.nextSibling;
298                 df.appendChild(el);
299                 el = ns;
300             }
301             el = df;
302         }
303         return el;
304     }
305
306 <span id='Ext-core-DomHelper-method-insertIntoTable'>    /**
307 </span>     * @ignore
308      * Nasty code for IE's broken table implementation
309      */
310     function insertIntoTable(tag, where, el, html) {
311         var node,
312             before;
313
314         tempTableEl = tempTableEl || document.createElement('div');
315
316         if(tag == 'td' &amp;&amp; (where == afterbegin || where == beforeend) ||
317            !tableElRe.test(tag) &amp;&amp; (where == beforebegin || where == afterend)) {
318             return null;
319         }
320         before = where == beforebegin ? el :
321                  where == afterend ? el.nextSibling :
322                  where == afterbegin ? el.firstChild : null;
323
324         if (where == beforebegin || where == afterend) {
325             el = el.parentNode;
326         }
327
328         if (tag == 'td' || (tag == 'tr' &amp;&amp; (where == beforeend || where == afterbegin))) {
329             node = ieTable(4, trs, html, tre);
330         } else if ((tag == 'tbody' &amp;&amp; (where == beforeend || where == afterbegin)) ||
331                    (tag == 'tr' &amp;&amp; (where == beforebegin || where == afterend))) {
332             node = ieTable(3, tbs, html, tbe);
333         } else {
334             node = ieTable(2, ts, html, te);
335         }
336         el.insertBefore(node, before);
337         return node;
338     }
339     
340 <span id='Ext-core-DomHelper-method-createContextualFragment'>    /**
341 </span>     * @ignore
342      * Fix for IE9 createContextualFragment missing method
343      */   
344     function createContextualFragment(html){
345         var div = document.createElement(&quot;div&quot;),
346             fragment = document.createDocumentFragment(),
347             i = 0,
348             length, childNodes;
349         
350         div.innerHTML = html;
351         childNodes = div.childNodes;
352         length = childNodes.length;
353
354         for (; i &lt; length; i++) {
355             fragment.appendChild(childNodes[i].cloneNode(true));
356         }
357
358         return fragment;
359     }
360     
361     pub = {
362 <span id='Ext-core-DomHelper-method-markup'>        /**
363 </span>         * Returns the markup for the passed Element(s) config.
364          * @param {Object} o The DOM object spec (and children)
365          * @return {String}
366          */
367         markup : function(o){
368             return createHtml(o);
369         },
370
371 <span id='Ext-core-DomHelper-method-applyStyles'>        /**
372 </span>         * Applies a style specification to an element.
373          * @param {String/HTMLElement} el The element to apply styles to
374          * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
375          * a function which returns such a specification.
376          */
377         applyStyles : function(el, styles){
378             if (styles) {
379                 el = Ext.fly(el);
380                 if (typeof styles == &quot;function&quot;) {
381                     styles = styles.call();
382                 }
383                 if (typeof styles == &quot;string&quot;) {
384                     styles = Ext.core.Element.parseStyles(styles);
385                 }
386                 if (typeof styles == &quot;object&quot;) {
387                     el.setStyle(styles);
388                 }
389             }
390         },
391
392 <span id='Ext-core-DomHelper-method-insertHtml'>        /**
393 </span>         * Inserts an HTML fragment into the DOM.
394          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
395          * @param {HTMLElement/TextNode} el The context element
396          * @param {String} html The HTML fragment
397          * @return {HTMLElement} The new node
398          */
399         insertHtml : function(where, el, html){
400             var hash = {},
401                 hashVal,
402                 range,
403                 rangeEl,
404                 setStart,
405                 frag,
406                 rs;
407
408             where = where.toLowerCase();
409             // add these here because they are used in both branches of the condition.
410             hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
411             hash[afterend] = ['AfterEnd', 'nextSibling'];
412             
413             // if IE and context element is an HTMLElement
414             if (el.insertAdjacentHTML) {
415                 if(tableRe.test(el.tagName) &amp;&amp; (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
416                     return rs;
417                 }
418                 
419                 // add these two to the hash.
420                 hash[afterbegin] = ['AfterBegin', 'firstChild'];
421                 hash[beforeend] = ['BeforeEnd', 'lastChild'];
422                 if ((hashVal = hash[where])) {
423                     el.insertAdjacentHTML(hashVal[0], html);
424                     return el[hashVal[1]];
425                 }
426             // if (not IE and context element is an HTMLElement) or TextNode
427             } else {
428                 // we cannot insert anything inside a textnode so...
429                 if (Ext.isTextNode(el)) {
430                     where = where === 'afterbegin' ? 'beforebegin' : where; 
431                     where = where === 'beforeend' ? 'afterend' : where;
432                 }
433                 range = Ext.supports.CreateContextualFragment ? el.ownerDocument.createRange() : undefined;
434                 setStart = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
435                 if (hash[where]) {
436                     if (range) {
437                         range[setStart](el);
438                         frag = range.createContextualFragment(html);
439                     } else {
440                         frag = createContextualFragment(html);
441                     }
442                     el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);
443                     return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];
444                 } else {
445                     rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';
446                     if (el.firstChild) {
447                         if (range) {
448                             range[setStart](el[rangeEl]);
449                             frag = range.createContextualFragment(html);
450                         } else {
451                             frag = createContextualFragment(html);
452                         }
453                         
454                         if(where == afterbegin){
455                             el.insertBefore(frag, el.firstChild);
456                         }else{
457                             el.appendChild(frag);
458                         }
459                     } else {
460                         el.innerHTML = html;
461                     }
462                     return el[rangeEl];
463                 }
464             }
465             //&lt;debug&gt;
466             Ext.Error.raise({
467                 sourceClass: 'Ext.core.DomHelper',
468                 sourceMethod: 'insertHtml',
469                 htmlToInsert: html,
470                 targetElement: el,
471                 msg: 'Illegal insertion point reached: &quot;' + where + '&quot;'
472             });
473             //&lt;/debug&gt;
474         },
475
476 <span id='Ext-core-DomHelper-method-insertBefore'>        /**
477 </span>         * Creates new DOM element(s) and inserts them before el.
478          * @param {Mixed} el The context element
479          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
480          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
481          * @return {HTMLElement/Ext.core.Element} The new node
482          */
483         insertBefore : function(el, o, returnElement){
484             return doInsert(el, o, returnElement, beforebegin);
485         },
486
487 <span id='Ext-core-DomHelper-method-insertAfter'>        /**
488 </span>         * Creates new DOM element(s) and inserts them after el.
489          * @param {Mixed} el The context element
490          * @param {Object} o The DOM object spec (and children)
491          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
492          * @return {HTMLElement/Ext.core.Element} The new node
493          */
494         insertAfter : function(el, o, returnElement){
495             return doInsert(el, o, returnElement, afterend, 'nextSibling');
496         },
497
498 <span id='Ext-core-DomHelper-method-insertFirst'>        /**
499 </span>         * Creates new DOM element(s) and inserts them as the first child of el.
500          * @param {Mixed} el The context element
501          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
502          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
503          * @return {HTMLElement/Ext.core.Element} The new node
504          */
505         insertFirst : function(el, o, returnElement){
506             return doInsert(el, o, returnElement, afterbegin, 'firstChild');
507         },
508
509 <span id='Ext-core-DomHelper-method-append'>        /**
510 </span>         * Creates new DOM element(s) and appends them to el.
511          * @param {Mixed} el The context element
512          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
513          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
514          * @return {HTMLElement/Ext.core.Element} The new node
515          */
516         append : function(el, o, returnElement){
517             return doInsert(el, o, returnElement, beforeend, '', true);
518         },
519
520 <span id='Ext-core-DomHelper-method-overwrite'>        /**
521 </span>         * Creates new DOM element(s) and overwrites the contents of el with them.
522          * @param {Mixed} el The context element
523          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
524          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
525          * @return {HTMLElement/Ext.core.Element} The new node
526          */
527         overwrite : function(el, o, returnElement){
528             el = Ext.getDom(el);
529             el.innerHTML = createHtml(o);
530             return returnElement ? Ext.get(el.firstChild) : el.firstChild;
531         },
532
533         createHtml : createHtml,
534         
535 <span id='Ext-core-DomHelper-method-createDom'>        /**
536 </span>         * Creates new DOM element(s) without inserting them to the document.
537          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
538          * @return {HTMLElement} The new uninserted node
539          * @method
540          */
541         createDom: createDom,
542         
543 <span id='Ext-core-DomHelper-property-useDom'>        /** True to force the use of DOM instead of html fragments @type Boolean */
544 </span>        useDom : false,
545         
546 <span id='Ext-core-DomHelper-method-createTemplate'>        /**
547 </span>         * Creates a new Ext.Template from the DOM object spec.
548          * @param {Object} o The DOM object spec (and children)
549          * @return {Ext.Template} The new template
550          */
551         createTemplate : function(o){
552             var html = Ext.core.DomHelper.createHtml(o);
553             return Ext.create('Ext.Template', html);
554         }
555     };
556     return pub;
557 }();
558 </pre>
559 </body>
560 </html>