CODEWITHSUNDEEP
extjs
user1234
user1234

Reputation: 3159

How to get a child element innerhtml using the parent classname in ExtJS

I have an HTML:

<div class="parent">
   <span class="child">Child elements</span>
</div>

code:

Ext.query('.parent'); //give me

o/p:

<div class="parent"><span class="child">Child elements</span></div>

how do I get access to the child element so that I can update the child text value?

Upvotes: 2

Views: 1676

Answers (3)

Nikos Js
Nikos Js

Reputation: 199

Here's another way: using setText fiddle

Upvotes: 1

And-y
And-y

Reputation: 1524

Ext.query('.parent span.child')[0].innerHTML  = 'Your new child text';

The query .parent span.child matches all spans with the class child in the parent div. Ext.query returns an array of DOM objects, which you can manipulate.

If you need objects of Ext.dom.Element you can call the query function with true as it's secound parameter. See the documentation of ExtJs 6 for more informations.

A working fiddle.

Upvotes: 1

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

One not very elegant way of solving this can be:

Ext.query('.parent')[0].childNodes[1].innerHTML  = 'Your text here';

When you use Ext.query ('.parent'), you get an array of all children objects (DOM) of the objects that have parent class. In this case, only one item will be returned in the array. This item is the div whose class is parent.

This item has three children, #text, span and #text again. The first #text refers to the text that is before span, the span that is our target object, and the third object is #text, which is the text that lies after the span.

So you need to access the second element of the array, which in this case is span. Then just access the innerHTML property and set the text.

Here fiddle, check the index.html file in the example.

Upvotes: 1

Related Questions