我可以用另一个 HTML 元素替换一个 HTML 元素吗?
但我不想让内容空白。
从:
<a data-text="text">content</a>
至:
<div data-text="text">content</div>
任何想法?
我可以用另一个 HTML 元素替换一个 HTML 元素吗?
但我不想让内容空白。
从:
<a data-text="text">content</a>
至:
<div data-text="text">content</div>
任何想法?
2018 年更新:
使用ChildNode.replaceWith()方法。如 MDN 文档中所示:
var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.replaceWith(span);
console.log(parent.outerHTML);
// "<div><span></span></div>"
此答案中的更多信息。
不可以。您不能更改 DOM 节点的tagName
( nodeName
)。
您只能创建所需类型的新节点,复制所有属性(可能还有属性)并移动子节点。但是,您会丢失无法访问的东西,例如附加的事件侦听器。例如,当您想在 IE中更改 an 的类型input
时,可以使用此技术。
但是,绝对没有理由将 an 更改a
为 a div
,它们具有完全不同的语义(还有行为和布局)。
这是解决该问题的更现代(2022+)的方法。
基本上你创建一个新元素,将属性传递给它,然后传递子元素,最后用新元素替换元素。
我还为区分大小写的元素提供了一个示例,例如<svg>
. 出于区分大小写的目的,您不应使用innerHTML
. 而是将while
循环与appendChild
.
function changeTag (node, tag) {
const clone = createElement(tag)
for (const attr of node.attributes) {
clone.setAttributeNS(null, attr.name, attr.value)
}
while (node.firstChild) {
clone.appendChild(node.firstChild)
}
node.replaceWith(clone)
return clone
}
function createElement (tag) {
if (tag === 'svg') {
return document.createElementNS('http://www.w3.org/2000/svg', 'svg')
} else {
return document.createElementNS('http://www.w3.org/1999/xhtml', tag)
}
}
const node1 = document.getElementById('node1')
console.log(node1.outerHTML)
console.log(changeTag(node1, 'a').outerHTML)
const node2 = document.getElementById('node2')
console.log(node2.outerHTML)
console.log(changeTag(node2, 'svg-custom').outerHTML)
<p id="node1" class="x" rel="follow">
Some <b class="a1">bold</b> text
</p>
<svg id="node2" height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
当然,但为什么?
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);
}
这将是无效div
的 HTML(元素没有href
属性)并且不再像链接一样。
但是,您可以使用 JavaScript 模拟该行为:
$('div').on('click', function() {
location.href = $(this).attr('href');
});
但请不要这样做。例如,它会破坏鼠标中键(对于新选项卡)。
利用
var href=$("#aId").attr('href');
$("#aId").replaceWith($("<div"+href+">" + $("#aId").innerHTML + "</div>"));
这是在您的 HTML 代码中执行此操作的简单方法。通过一些嵌入式样式和 javascript 代码,这将为您提供您正在寻找的效果......
<div style="display: inline; color: blue;" onclick="window.location='link/url';">Click!</div>
const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<div ${atts.map(
attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</div>`
此解决方案将转换您的标签名称并保留所有属性,而无需您自己从 DOM 中删除和添加元素。浏览器会为您处理,因此您必须从 DOM 重新加载元素才能在转换后访问它。
let elem = document.getElementById("test")
const tagName = 'div'
const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<${tagName} ${atts.map(
attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</${tagName}>`
elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)
<span id="test" data-test="123">I want to be a div.</span>
elem.outerHTML = `<div id="test">${elem.innerHTML}</div>`
这个单线会做到这一点,但请记住,elem
它将指向旧元素,就像在上面的解决方案中一样。
let elem = document.getElementById("test")
const tagName = 'div'
elem.outerHTML = `<${tagName} id="test">${elem.innerHTML}</${tagName}>`
elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)
<span id="test">I want to be a div.</span>
使用这些方法,您总是必须从 DOM 重新加载对象才能继续使用它,因为浏览器将创建一个新的 DOM 元素并将其放置在引擎盖下。
这是一种在没有 jQuery 的情况下更改元素标签的方法 -
// Just provide the element and the new tag
function changeTag(el, newTag) {
var outerHTML = el.outerHTML // Get the outerHTML of the element
var tag = el.tagName // Get the tag of the outerHTML
var r = new RegExp(tag, 'i') // Prepare a RegExp to replace the old tag with the new tag
outerHTML = outerHTML.replace(r, newTag) // Replace it
el.outerHTML = outerHTML // Set the outerHTML of the element
}
<span>Span 1</span> -- <span>Span 2</span>
<br>
<button onclick="changeTag(document.querySelector('span'), 'div')">
Change tag
</button>
<input id="tmpType" type="text" name="password" />
<script type="text/javascript">
document.getElementById('tmpType').type = 'password';
</script>
我用它在我的动态表单上显示/隐藏密码