Tag-Name ändern(HTML, JavaScript, DOM-Manipulation)?

Hi, wie kann ich, wenn ich mit DOM-Methoden ein Element auswähle, dessen Tag-Namen ändern, geht das überhaupt?

Answer 1

[MrAmazing2]

Entweder per CSS:

a.deactivate-link {
  pointer-events: none;
  text-decoration: none;
  color: black;
}

https://jsfiddle.net/3o2nz0mq/2/

Oder komplett per JavaScript:

const oldEl = document.getElementById("myElement");
const newEl = document.createElement('span');
newEl.innerHTML = oldEl.innerHTML; //Content übertragen
newEl.classList = oldEl.classList; //Klassen übertragen, um Style sogut es geht beizubehalten
oldEl.replaceWith(newEl);

https://jsfiddle.net/qsu6eoa0/

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Answer 2

[regex9]

Du kannst das Element mit replaceWith ersetzen.

Aber ob das überhaupt notwendig ist, würde ich zunächst infrage stellen. Es kann womöglich ausreichen, das Verhalten / Aussehen des Elements mit CSS zu ändern. Das heißt, du könntest dem Element vermutlich ebenso gut einen CSS-Klassenselektor zuweisen.

element.classList.add("some-css-class");

CSS:

.some-css-class {
  /* ... */
}

Comments

[Master643]

Aber ob das überhaupt notwendig ist, würde ich zunächst infrage stellen. Es kann womöglich ausreichen, das Verhalten / Aussehen des Elements mit CSS zu ändern. Das heißt, du könntest dem Element vermutlich ebenso gut einen CSS-Klassenselektor zuweisen.

Nein, eher nicht, denn in diesem Fall soll ein Hyperlink zu einem gewöhnlichen, nicht anklickbaren Fall werden.

[MrAmazing2]

@Master643

Ob etwas anklickbar ist kann man auch per CSS ändern.

a.some-css-class {
  pointer-events: none;
  text-decoration: none;
  color: black;
}

[Master643]

@MrAmazing2

Ach so, mit pointer-events kann man anklicken abschalten oder wie?

[MrAmazing2]

@Master643

Yes ^^

[regex9]

@Master643

Das kann man zwar auch via CSS regeln (pointer-events), aber in dem Fall wäre eine andere Lösung (z.B. der Austausch des Elements) tatsächlich deutlich besser.

[Master643]

@regex9

Aber da sich auch am Style nichts ändern soll ist die pointer-events Lösung deutlich einfacher, wieso meinst du denn das eine andere Lösung deutlich besser wäre?

[regex9]

@Master643

Mit CSS nimmst du nur Änderungen auf visueller Ebene vor, die aber nicht jeder Nutzer (bspw. blinde Personen) erfassen kann. Bei Elementen wie h2, p, div, u.ä. ist das soweit unproblematisch, da der Nutzer keine Interaktion mit ihnen erwartet. Bei interaktiven Elementen wie eben Links ist das anders: Der Nutzer erwartet, dass etwas bei Klick passiert, doch es passiert nichts.

Auch wenn du das weitere Aussehen des Links änderst (Schriftfarbe, etc.), bleibt es physisch ein Link. Die Art, wie eine Webseite ausgelesen wird, ist nicht auf die visuelle Ebene beschränkt. Es gibt ebenso Tools, die noch einmal das Markup direkt abgreifen und interpretieren.

[Master643]

@regex9

Verstehe, aber letztendlich führt der Link um den es hier geht eigentlich nur auf exakt dieselbe Seite auf der man eh schon ist und durch das Abschalten will ich nur verhindern das die Seite ungewollt erneut geladen wird um Ressourcen zu sparen.

[regex9]

@Master643

Link ist Link. Ob er nun auf die selbe Seite führt oder nicht. Für einen Nutzer ist nicht ersichtlich, wieso er plötzlich nicht mehr funktioniert.