title: Use Javascript to dynamically replace HTML tags with more complicated code
body: <p>I was wondering whether there is a good way of attaining the following: I select a HTML class, marked with a certain CSS class (say <code>&lt;span class="myclass"&gt;My content&lt;/span&gt;</code>) and I want the browser to render it as the text "My content" customized in some weird ways, for instance in this way: I write </p>
  
  <pre><code>&lt;span class="myclass" data-image="myimage.jpg" data-title="My Title"&gt;My content&lt;/span&gt;
  </code></pre>
  
  <p>and I get it replaced with </p>
  
  <pre><code>&lt;h1&gt;My Title&lt;/h2&gt; My con&lt;img src="myimage.jpg"&gt;en&lt;img src="myimage.jpg"&gt;
  </code></pre>
  
  <p>(one occurrence of the image for each 't'.</p>
  
  <p>I mean, I would like some Javascript code to be executed with arguments the inner HTML and the attributes of my <code>&lt;span class="myclass"&gt;</code> tags; this code should have the effect of replacing my HTML tag with some more complicated HTML code, but keeping it in exactly the same position in the HTML page. Is it possible to do it?</p>
  
  <p>Sorry for my awful way of posing the question, but I am an autodidact in HTML and Javascript!</p>