Get the title of an <img> and apply it to it's parent <div> with YUI3

Question

I have the following HTML:

<div>
    <img src="source.com/image.jpg" title="My Image">
</div>

I would like to get the title of all images ("My image") in this case, and add this title on to the parent , so that the above example would look like this:

<div title="My Image">
    <img src="source.com/image.jpg" title="My Image">
</div>

Would appreciate it very much if someone could give me a push in the right direction!

Thanks!

Answer 1

This is pretty much the same question as the previous one you posted. In this case you do need to save the image node to a variable so that you can read its title and set it to the parent.

YUI().use('node', function (Y) {
  var image = Y.one('img');
  image.get('parentNode').set('title', image.get('title'));
});

If you're having trouble making changes to DOM elements I'd suggest you take a little time to read a couple of articles/books that introduce you to the subject. Here are some good options:

• Eloquent JavaScript. A great book for starting with JavaScript and that has a chapter about the DOM.
• The Mozilla Developer Network has a great collection of articles.
• The YUI3 Cookbook will give you everything you need to get started with YUI.