Question

Here’s my sample HTML:

I would like to modify the content of the highlighted div to “New Title”.

Here’s my current code:

var divTitle = Ext.select('div[id="main_form"]/table/tbody/tr[1]/td/table/tbody/tr[1]/td/div/div[2]/div');

It seems that it is not working. I got that from using Chrome browser and copying the XPath. Can someone help or guide me here?

Also, I believe you can also simplify the query using the CSS select (in my case ‘pt_title’) so please mention how that can be coded too.

Thanks in advance.

Answer 1

Found one solution (using CSS selector):

var divTitle = Ext.select('#main_form div.pt_title');

I’m still interested on the other solution wherein you really have to go down each element. I believe this is the equivalent in jQuery:

var divTitle = $('#main_form > table > tbody > tr:nth-child(1) > td > table > tbody > tr:nth-child(1) > td > div > div:nth-child(2) > div');
divTitle.update('New Title');