¿Puedo cambiar el tipo de un elemento HTML?

¿Puedo reemplazar un elemento HTML con otro?

quiero cambiar un <a> a un <div>pero no quiero dejar el contenido en blanco.

De:

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

a:

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

¿Alguna idea?

Utilizar el ChildNode.replaceWith() método para crear un nuevo nodo y reemplazar el antiguo nodo con el nuevo. Como se ejemplifica en los documentos de 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>"

Hay más información disponible en esta respuesta.

No. No puede cambiar el tagName (nodeName) de un nodo DOM.

Solo puede crear un nuevo nodo del tipo deseado, copiar todos los atributos (y quizás propiedades) y mover los nodos secundarios. Sin embargo, de esta manera aún se perderían elementos inaccesibles, como los detectores de eventos adjuntos. Esta técnica se utiliza, por ejemplo, cuando desea cambiar el tipo de una input en IE.

Sin embargo, no hay absolutamente ninguna razón para cambiar un a en un div; tienen una semántica completamente diferente (también comportamiento y diseño).

Básicamente, creas un nuevo elemento, le transfieres los atributos, luego transfieres los elementos secundarios y al final reemplazas el elemento con el nuevo.

También he proporcionado un ejemplo para elementos que distinguen entre mayúsculas y minúsculas como <svg>. Para fines de distinción entre mayúsculas y minúsculas, no debe usar innerHTML. En su lugar, utilice el while bucle con 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>

claro, pero ¿por qué?

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);
}

Sería HTML no válido (div los elementos no tienen href atributo) y ya no actúa como un enlace.

Sin embargo, podría emular el comportamiento usando JavaScript:

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

Pero por favor no hagas esto. Rompe los clics del medio del mouse (para una nueva pestaña), por ejemplo.

He aquí una forma sencilla de hacer el div Mira y Actuar como un a etiqueta sin tener que cambiar el tipo de etiqueta:

Click <div style="display:inline; color:blue; text-decoration:underline; cursor:pointer;"
           onclick="window.location='http://example.com/';">here</div>!

Usar

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

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