Javascript 替换标记并保留属性

可能重复：

是否可以将

标记替换为

标记并保留其所有属性

我有这个HTML，当有人点击编辑时，我想将所有的编辑链接转换为span's

<a href="javascript:void(0);" class="edit" data-id="123">Edit</a>

//替换标记
var replacementTag='span'；
$（'a'）。每个（函数（）{
var outer=this.outerHTML；
//替换开头标签
var regex=new RegExp（“正如FAngel所指出的，在这种情况下，样式更改要简单得多。在我的示例中，我将继续使用事件委派，而不是
.live
，因为
.live
将在以后的jQuery版本中删除：

$(document).on('click', '.edit', function (e) {
   //add inactive class to *this* link
   $(this).addClass('inactive-link');

   //stop default link behavior, i.e. opening a new page
   e.preventDefault();
});

只需检查单击的元素是否有类非活动链接。编辑完成后将其删除

基本上，链接没有“禁用”功能。但您可以在编辑模式下解除事件处理程序的绑定，或者检查链接是否有类，如上面的代码所示

另外，请注意live已被弃用，您最好使用
.on
（如果您有最新的jQuery，v1.7及更高版本）。您可以找到如何将
live
替换为
on
这应该适合您的需要：

功能开关标签（e、toTag）{
var outerHTML=e.outerHTML；
outerHTML=outerHTML.replace（/^（.*？$/ig，“$3”）；
e、 outerHTML=outerHTML；
};

使用示例：

$（“.edit”）。单击（函数（）{
开关标签（本“范围”）；
});

）
我会使用两个容器：
链接
和
编辑链接

当按下编辑按钮时，我将用容器链接转换为
的所有
标记填充div
编辑链接

当按下保存按钮时，我将在
链接
容器中重新创建所有
标记

$('#myButtonEdit').click(function(){        
    $('#links').hide();
    $('#edit-links').empty();

    //loop on all <a> tags to create <span> in edit-links div
    $('a').each(function(){
        $('#edit-links').append('<span id="'+this.id+'" class="'+$(this).attr('class')+'">'+$(this).attr('href')+'</span>');
    });
});

$('#myButtonSave').click(function(){

    $('#edit-links').hide();
    $('#links').empty();

    //loop on all <span> tags to create <a> in links container
    $('#edit-links span').each(function(){
        $('#links').append('<a id="'+this.id+'" class="'+$(this).attr('class')+'" href="'+$(this).html()+'">'+$(this).html()+'</span>');
    });
});

$（'myButtonEdit'）。单击（函数（）{
$（“#链接”）.hide（）；
$（“#编辑链接”）.empty（）；
//在“编辑链接”div中创建的所有标记上循环
$（'a'）。每个（函数（）{
$（'#编辑链接'）.append（'+$（this.attr（'href'）+''）；
});
});
$（“#我的按钮保存”）。单击（函数（）{
$（“#编辑链接”）.hide（）；
$（'#links'）.empty（）；
//循环所有标记以在容器中创建链接
$（'#编辑链接span'）。每个（函数（）{
$（'#links'）.append（'+$（this.html（）+''）；
});
});
此外，我不喜欢您解决问题的方式，这里有一个可能的解决方案：

function replaceElement(el, tagName) {
  var attrs = {
    text: el.innerHTML
  };
  $.each(el.attributes, function() {
    attrs[this.nodeName] = this.nodeValue;
  });
  $(el).replaceWith($("<" + tagName + " />", attrs));
}

$("a.edit").on("click", function() {
  replaceElement(this, "span");
});

函数替换元素（el，标记名）{
变量属性={
文本：el.innerHTML
};
$.each（el.attributes，function（）{
attrs[this.nodeName]=this.nodeValue；
});
$（el）.替换为（$（“”，attrs））；
}
$（“a.edit”）。在（“单击”，函数（）上{
替换元素（本“范围”）；
});

演示：

<新元素将包含被替换元素的所有属性。但是，你应该考虑<代码> <代码>不应该有<代码> SRC < /C>属性，根据标准。
容易。我不这么认为。但是为什么你需要它？最简单的是改变所有编辑链接的样式（所以它们看起来像不活动的）。并阻止事件处理程序的执行。@FAngel我如何暂时禁用它？请参阅editsSee disable what？click函数？它已被禁用。是否要更改
光标，使其看起来不再是悬停时的链接？听起来像是xy问题…所以实际问题是如何禁用链接上的用户交互？Will这将禁用所有编辑链接？因为这正是我想要的。@RyanNaddy是的，单击的每个
.edit
链接都将调用
e.preventDefault（）
@ExplosionPills
e.preventDefault（）
对于防止onclick处理程序的执行是无用的。尽管它可以替代
href=“javascript:void（0）；”
，它不会阻止附加事件的执行。@FAngel我可能误解了。如果他想阻止其他附加处理程序触发，他应该使用
e.stopImmediatePropagation（）
谢谢，我也使用了它，但我只能选择一个。感谢使用纯JS，这应该是正确的答案
$(".edit").live("click", function(e){
    if(!$(e.target).hasClass("inactive-link")) { //suppose $(this) will work instead of $(e.target), but do not remember for sure
         $(".edit").addClass("inactive-link");// after this is done - this function will not execute anymore for .edit elements because of previouse if statement
         //code to start editing
    }
});

$('#myButtonEdit').click(function(){        
    $('#links').hide();
    $('#edit-links').empty();

    //loop on all <a> tags to create <span> in edit-links div
    $('a').each(function(){
        $('#edit-links').append('<span id="'+this.id+'" class="'+$(this).attr('class')+'">'+$(this).attr('href')+'</span>');
    });
});

$('#myButtonSave').click(function(){

    $('#edit-links').hide();
    $('#links').empty();

    //loop on all <span> tags to create <a> in links container
    $('#edit-links span').each(function(){
        $('#links').append('<a id="'+this.id+'" class="'+$(this).attr('class')+'" href="'+$(this).html()+'">'+$(this).html()+'</span>');
    });
});

function replaceElement(el, tagName) {
  var attrs = {
    text: el.innerHTML
  };
  $.each(el.attributes, function() {
    attrs[this.nodeName] = this.nodeValue;
  });
  $(el).replaceWith($("<" + tagName + " />", attrs));
}

$("a.edit").on("click", function() {
  replaceElement(this, "span");
});