Replace HTML Tag with another HTML

Question

I am trying to replace some HTML Tag with another HTML Tag with php or jquery .

My Current Tag (Default) :

<li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li>

I want to replace above HTML tag with

<li class="dropdown"> <a href="index.html" class="dropdown-toggle active"> Home</a></li>

---

Example :

Default tag : <h1> tag </h2>

Replaced tag : <h2> tag </h2>

I already search many articles on stackoverflow but didnt founded solution for it.

Thank in advance

Answer 1

Update

Just saw your question again. You just need to add:

$(".dropdown-toggle").addClass("active");

---

Example:

Default tag: <h1> tag </h2>
Replaced tag: <h2> tag </h2>

You can use .replaceWith():

$("h1").replaceWith(function() {
  return $("<h2 />", {
    html: $(this).html()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1> tag </h1>

Answer 2

You just need to add a class active on a, for that just do

$('<li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li>').find("a").addClass("active")

Answer 3

Try this. I have created a custom function where you can pass the class to be added along with the target element and it would output the entire html back.

$.fn.AddNewClass = function(newClass,targetElement)
{
   $(this).contents().filter(function()
   {
      if($(this).is(targetElement)){
          var clone =  $(this);          
          $(clone).addClass(newClass);
          $(this).replaceWith($(clone));
       }
   });  

    return $(this)[0].outerHTML;
}

var ele = "<li class='dropdown'><a href='index.html' class='dropdown-toggle'>Home</a></li>";
var newEle = $(ele).AddNewClass('active','a.dropdown-toggle');
alert(newEle);

Example : https://jsfiddle.net/DinoMyte/so000t49/5/