Javascript-更改html标记类型

我有一个问题，我可以用另一个替换html标签吗

但我不想让内容变成空白。 像这样：

<a data-text="text">content</a>

内容

到

内容

有什么想法吗？

它将是无效的HTML（

div

元素没有

href

属性），并且不再像链接一样工作

但是，您可以使用JavaScript模拟该行为：

$('div').on('click', function() {
    location.href = $(this).attr('href');
});

但请不要这样做。例如，它会打断鼠标中键单击（对于新选项卡）。

这将是无效的HTML（

div

元素没有

href

属性），并且不再像链接一样工作

但是，您可以使用JavaScript模拟该行为：

$('div').on('click', function() {
    location.href = $(this).attr('href');
});

---

但请不要这样做。例如，它会打断鼠标中键的点击（对于新选项卡）。

这里有一种在HTML代码中执行此操作的简单方法。通过一点嵌入式样式和javascript代码，这将为您提供所需的效果

<div style="display: inline; color: blue;" onclick="window.location='link/url';">Click!</div>

点击！

以下是一种在HTML代码中执行此操作的简单方法。通过一点嵌入式样式和javascript代码，这将为您提供所需的效果

<div style="display: inline; color: blue;" onclick="window.location='link/url';">Click!</div>

点击！

当然可以，但为什么

var a = ​document.getElementsByTagName('a');
var src, el, attrs;
for(var i=0,l=a.length;i<l;i++) {
    src = a[i];
    el = document.createElement('div');
    attrs = src.attributes;
    for(var j=0,k=attrs.length;j<k;j++) {
        el.setAttribute(attrs[j].name, attrs[j].value);
    }
    el.innerHTML = src.innerHTML;
    src.parentNode.replaceChild(el, src);
}

var a=​document.getElementsByTagName（'a'）；
变量src、el、attrs；
对于（var i=0，l=a.length；i当然，但为什么

var a = ​document.getElementsByTagName('a');
var src, el, attrs;
for(var i=0,l=a.length;i<l;i++) {
    src = a[i];
    el = document.createElement('div');
    attrs = src.attributes;
    for(var j=0,k=attrs.length;j<k;j++) {
        el.setAttribute(attrs[j].name, attrs[j].value);
    }
    el.innerHTML = src.innerHTML;
    src.parentNode.replaceChild(el, src);
}

var a=​document.getElementsByTagName（'a'）；
变量src、el、attrs；
对于（var i=0，l=a.length；iNo），不能更改DOM节点的（）

您只能创建所需类型的新节点，复制所有属性（可能还有属性）并移动子节点。但您可能会丢失无法访问的内容，如附加的事件侦听器。例如，当您需要时，可以使用此技术

但是，绝对没有理由将
a
更改为
div
，它们具有完全不同的语义（以及行为和布局）。
没有。不能更改DOM节点的（）

您只能创建所需类型的新节点，复制所有属性（可能还有属性）并移动子节点。但您可能会丢失无法访问的内容，如附加的事件侦听器。例如，当您需要时，可以使用此技术

但是，绝对没有理由将
a
更改为
div
，它们具有完全不同的语义（以及行为和布局）。
使用

var href=$("#aId").attr('href');

$("#aId").replaceWith($("<div"+href+">" + $("#aId").innerHTML + "</div>"));

var href=$（“#aId”）.attr（'href'）；
$（“#aId”）.replace为（$（+$（“#aId”）.innerHTML+）；
使用

var href=$（“#aId”）.attr（'href'）；
$（“#aId”）.replace为（$（+$（“#aId”）.innerHTML+）；
2018年更新：

使用方法。如MDN文档中所示：

var parent=document.createElement（“div”）；
var child=document.createElement（“p”）；
父、子（子）；
var span=document.createElement（“span”）；
替换为（span）；
console.log（parent.outerHTML）；
// ""

更多信息请参见2018年更新：

使用方法。如MDN文档中所示：

var parent=document.createElement（“div”）；
var child=document.createElement（“p”）；
父、子（子）；
var span=document.createElement（“span”）；
替换为（span）；
console.log（parent.outerHTML）；
// ""

更多信息请参见。

document.getElementById（'tmpType'）。type='password'；

我用它在动态表单上显示/隐藏密码

document.getElementById（'tmpType'）。type='password'；

我用它在我的动态表单上显示/隐藏密码-


//只需提供元素和新标记
功能变更标签（el，新标签）{
var outerHTML=el.outerHTML//获取元素的outerHTML
var tag=el.tagName//获取outerHTML的标记
var r=new RegExp（标记'i'）//准备一个RegExp，用新标记替换旧标记
outerHTML=outerHTML.replace（r，newTag）//替换它
el.outerHTML=outerHTML//设置元素的outerHTML
}
Span 1--Span 2


更改标签
以下是一种在不使用jQuery的情况下更改元素标记的方法-


//只需提供元素和新标记
功能变更标签（el，新标签）{
var outerHTML=el.outerHTML//获取元素的outerHTML
var tag=el.tagName//获取outerHTML的标记
var r=new RegExp（标记'i'）//准备一个RegExp，用新标记替换旧标记
outerHTML=outerHTML.replace（r，newTag）//替换它
el.outerHTML=outerHTML//设置元素的outerHTML
}
Span 1--Span 2


更改标签
这里有一个更现代（2020+年）的方法来解决这个问题

基本上，创建一个新元素，将属性传递给它，然后传递子元素，最后用新元素替换该元素


const p=document.getElementById（'foo'）
常量a=document.createElement（'a'）
for（p.属性的常量属性）{
a、 setAttribute（attr.name、attr.value）
}
a、 innerHTML=p.innerHTML
p、 替换为（a）
console.log（a.outerHTML）

一些粗体字
这里有一个更现代（2020年以上）的方法来解决这个问题

基本上，创建一个新元素，将属性传递给它，然后传递子元素，最后用新元素替换该元素


const p=document.getElementById（'foo'）
常量a=document.createElement（'a'）
for（p.属性的常量属性）{
a、 setAttribute（attr.name、attr.value）
}
a、 innerHTML=p.innerHTML
p、 替换为（a）
console.log（a.outerHTML）

一些粗体字
javascript可能是答案href对于div是无效的属性tag@Robin-当然，对于动态内容！请提供您真正想要完成的内容的更多细节。您提出的问题没有多大意义，您得到的答案可能会误导您。一个可能的用途（以及我发现这一点的原因）是：