Q:

Custom attribute doesn't work

I made a custom attribute to add a title to each links.
<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

And here is the jQuery code
$('#ex1,#ex2').append('<span class="title">'+$(this).attr("nameOf")+'</span>');

But the link displays as undefined. How can I fix this.

A:

the this in your example is window, it does not know that it is supposed to be a reference to a link. In order to use this, you would need to use a function inside of append() and return the string. 

$('#ex1,#ex2').append( function() { return '<span class="title">'+$(this).attr("nameOf")+'</span>'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

And if you do not want to use JavaScript at all and have the text show up in the link, there is always a CSS Solution.

a[nameOf]::before {
  content: attr(nameOf)
}
<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

