Replace <span> tag with <div> tag

by Akram kamal

HTML

<h1>Replace &lt;span&gt; tag with &lt;div&gt; tag</h1>

<hr/>

<h2>Cointainer #1</h2>

<div id="parent1" class="parent"> 
     <span>
         <b>This is sample text 1</b>
     </span>
     <span>
         <i>This is sample text 2</i>
     </span>
</div>
<br/>
 <h2>Cointainer #2</h2>

<div id="parent2" class="parent"> 
     <span>
         <b>This is sample text 1</b>
     </span>
     <span>
         <i>This is sample text 2</i>
     </span>
</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 70%;
}
.parent {
    padding:8px;
    margin:8px;
    border:2px solid #ddd;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}
span {
    padding:5px;
    margin:5px;
    border:2px solid #eee;
    display:inline-block;
}
.myClass {
    padding:5px;
    margin:4px;
    border:1px solid green;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}

JavaScript

// Get all the span's inside parent2
var $span = $("#parent2 span");

// Replace all the span's with a div
$span.replaceWith(function () {
    return $('<div/>', {
        class: 'myClass',
        html: this.innerHTML
    });
});