var tagname = "codingdude-gravatar";
document.createElement(tagname);
//find all the tags occurrences (instances) in the document
var tagInstances = document.getElementsByTagName(tagname);
//for each occurrence run the associated function
for ( var i = 0; i < tagInstances.length; i++) {
codingdudeGravatar(tagInstances[i]);
}
function codingdudeGravatar(element){
//code for rendering the element goes here
if (element.attributes.email){
//get the email address from the element's email attribute
var email = element.attributes.email.value;
var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
element.innerHTML = "<img src='"+gravatar+"'>";
}
}
<!-- modify the email attribute here then Run to see the gravatar image change -->
<codingdude-gravatar email="[email protected]"></codingdude-gravatar><br/>
<a href="https://www.mockofun.com/tutorials/blur-photo/">Blur Photo Online</a>
External resources loaded into this fiddle: