用另一个HTML替换HTML标记

Question

我试图用php或jquery的另一个HTML标记替换一些HTML标记。

我的当前标签(默认)：

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

我想将上面的HTML标记替换为

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

例子：

默认标记：<h1> tag </h2>

替换标签：<h2> tag </h2>

我已经搜索了很多关于堆栈溢出的文章，但是没有为它找到解决方案。

提前感谢

Answer 1

更新

又看到你的问题了。你只需加上：

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

示例： 默认标记：<h1> tag </h2> 替换标签：<h2> tag </h2>

您可以使用.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

您只需要在active上添加一个类a，这样就可以了

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

Answer 3

尝尝这个。我已经创建了一个自定义函数，您可以传递要与目标元素一起添加的类，它将输出整个html。

$.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);

示例：https://jsfiddle.net/DinoMyte/so000t49/5/