SenorContento SenorContento - 24 days ago 9
Javascript Question

Is it possible to override existing html tags?

So, I tend to write my documents in markdown and I recently discovered that I could create abbreviations in markdown. This is great, but I had already created my own version of the abbreviation tag as I didn't like the way the standard tag looked when rendered. Is there a best practice to overriding existing tags?

The below text is to explain what I am trying to achieve in equivalence to. I cannot modify the markdown parser itself as I host my site on Github pages. For those who want to know how I have my own HTML tag, I use Polymer to create these tags.




Markdown Text:



Markdown converts text to HTML.

*[HTML]: HyperText Markup Language


Converted Code:



<p>Markdown converts text to <abbr title="HyperText Markup Language">HTML</abbr>.</p>





I want it converted to:



<p>Markdown converts text to <short-text abbr="HTML">HyperText Markup Language</short-text>.</p>

Answer

If it's all simple text, and you're doing this to all abbr tabs, you can simply build a new element and replace the old one.

With jQuery (for simplicity):

jQuery("abbr").each(function() {
    var title = jQuery(this).attr("title");
    var text = jQuery(this).text();
    var $new = jQuery("<short-text></short-text>").attr("abbr", text).html(title);
    jQuery(this).replaceWith($new);
});
Comments