— тег — (задан свойством tag конфигуратора);

— содержимое — текст "Привет от Web-сценария!" (задано свойством html конфигуратора);

— стилевой класс — someclass (свойство cls);

— имя — newparagraph (свойство id, соответствующее атрибуту тега ID).

Чтобы свежедобавленному абзацу не было скучно, мы добавили сразу же после него маркированный список из трех пунктов (листинг 15.3).

Пункты списка мы задали с помощью свойства children конфигуратора. Этому свойству мы присвоили массив, каждый из элементов которого представляет собой конфигуратор, описывающий параметры одного из пунктов списка.

Метод insertFirst аналогичен только что рассмотренному нами методу append за тем исключением, что вставляет созданный элемент Web-страницы в самое начало указанного элемента:

Ext.DomHelper.insertFirst(<элемент — будущий родитель>, <конфигуратор> [, true])

Как видим, этот метод принимает те же параметры, что и метод append.

Пример:

Ext.DomHelper.insertFirst("cmain", oConf);

Это выражение вставляет абзац, описываемый конфигуратором oConf, в самое начало контейнера cmain.

Методы insertBefore и insertAfter вставляют созданный элемент Web-страницы, соответственно, перед и после данного элемента на том же уровне вложенности:

Ext.DomHelper.insertBefore|insertAfter(<элемент — будущий "сосед">, <конфигуратор>[, true])

Первым параметром передается либо строка с именем элемента Web-страницы, который станет "соседом" вновь созданного элемента, либо представляющий его экземпляр объекта Element. Остальные параметры аналогичны соответствующим параметрам метода append.

Пример:

var oConf3 = { tag: "HR" } Ext.DomHelper.insertBefore("navbar", oConf3); Ext.DomHelper.insertAfter("navbar", oConf3);

Мы только что поместили до и после списка navbar горизонтальные линии.

Метод insertHtml позволяет создать новый элемент Web-страницы на основе строки с его HTML-кодом и поместить его возле указанного элемента или в него в качестве потомка:

Ext.DomHelper.insertHtml(<местоположение>, <элемент — будущий "сосед" или родитель>, <HTML-код>)

Первый параметр — строка, указывающая, куда будет помещен созданный методом элемент Web-страницы:

— "beforeBegin" — созданный элемент будет помещен перед открывающим тегом указанного элемента и станет его предыдущим "соседом" по уровню вложенности;

— "afterBegin" — созданный элемент будет помещен после открывающего тега указанного элемента и станет его первым потомком;

— "beforeEnd" — созданный элемент будет помещен перед закрывающим тегом указанного элемента и станет его последним потомком;

— "afterEnd" — созданный элемент будет помещен после закрывающего тега указанного элемента и станет его следующим "соседом" по уровню вложенности.

Второй параметр — элемент Web-страницы, который станет "соседом" или родителем для вновь создаваемого элемента. Это должен быть представляющий его экземпляр объекта HTMLElement (не Element!).

Третий параметр — строка с HTML-кодом, с помощью которого будет создан новый элемент.

Метод insertHtml возвращает экземпляр объекта HTMLElement, представляющий созданный элемент Web-страницы. К сожалению, указать ему вернуть экземпляр объекта Element мы не можем.

Пример:

var htelCMain = Ext.getDom("cmain"); Ext.DomHelper.insertHtml("afterBegin", htelCMain, "<P ID=\"newparagraph\" CLASS=\"someclass\">");

Здесь мы добавили в начало контейнера cmain новый абзац с именем newparagraph и привязанным к нему стилевым классом someclass.

Пример:

var htelNavbar = Ext.getDom("navbar"); Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>"); Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");

А здесь мы поместили до и после списка, формирующего полосу навигации, горизонтальные линии HTML.

Метод overwrite создает новый элемент Web-страницы и помещает его внутрь указанного элемента, заменяя все его предыдущее содержимое:

Ext.DomHelper.overwrite(<элемент — будущий родитель>, <конфигуратор>|<HTML-код>[, true])

Первый параметр — элемент Web-страницы, который станет родителем для вновь создаваемого элемента. Это может быть либо строка с именем элемента, либо представляющий его экземпляр объекта Element.