HTMLBRElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLBRElement extends HTMLElement

Beschreibung

HTMLBRElement ist die DOM-Schnittstelle für das HTML-Element  . Sie erbt alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget. Eigene, noch gültige Eigenschaften bringt sie nicht mit. Es gibt nur die veraltete Eigenschaft clear.

Ein   ist ein leeres Element (void element): Es hat keinen Inhalt und kein schließendes Tag. Sinnvoll ist es dort, wo der Zeilenumbruch zum Inhalt gehört, etwa bei Postanschriften, Gedichten oder Liedtexten. Für Abstände oder Layout sollte man es nicht verwenden, dafür ist CSS da (margin, display: block, white-space).

In JavaScript begegnet man HTMLBRElement vor allem, wenn man Text mit Umbrüchen sicher ins DOM schreibt (document.createElement('br') statt innerHTML) oder wenn man Umbrüche in bearbeitbaren Bereichen (contenteditable) auswertet oder entfernt.

Parameter

Name	Typ	Default	Beschreibung
$clear	string	""	Veraltet. Spiegelt das Attribut `clear` (`left`, `right`, `all`, `none`) und gibt an, wo der Text nach dem Umbruch neben umflossenen Elementen weiterläuft. Stattdessen die CSS-Eigenschaft `clear` verwenden.

Rückgabewert

Typ

HTMLBRElement

Beschreibung

document.createElement('br') sowie Abfragen wie querySelector('br') liefern eine Instanz von HTMLBRElement.

Beispiele

Element erzeugen und Typ prüfen

const br = document.createElement('br');
console.log(br instanceof HTMLBRElement);
console.log(br.tagName);
console.log(Object.getPrototypeOf(br) === HTMLBRElement.prototype);

true BR true

Mehrzeiligen Text ohne XSS-Risiko einfügen

// Benutzereingabe mit Zeilenumbrüchen sicher darstellen
const renderMultiline = (target, text) => {
  target.replaceChildren();
  text.split('\n').forEach((line, i) => {
    if (i > 0) target.append(document.createElement('br'));
    target.append(document.createTextNode(line));
  });
};

const adresse = document.createElement('address');
renderMultiline(adresse, 'Max Mustermann\nMusterstraße 1\n12345 <b>Musterstadt</b>');
document.body.append(adresse);
console.log(adresse.querySelectorAll('br').length);
console.log(adresse.innerHTML);

2 Max Mustermann Musterstraße 1 12345 Musterstadt

Doppelte Umbrüche in contenteditable bereinigen

const editor = document.createElement('div');
editor.contentEditable = 'true';
editor.innerHTML = 'Zeile 1<br><br><br>Zeile 2<br>';

// Aufeinanderfolgende <br> auf eines reduzieren
[...editor.querySelectorAll('br')].forEach((br) => {
  if (br.previousSibling instanceof HTMLBRElement) br.remove();
});
// Abschließendes <br> entfernen
if (editor.lastChild instanceof HTMLBRElement) editor.lastChild.remove();

console.log(editor.innerHTML);

Zeile 1 Zeile 2

// Wichtig · Fallstricke

Veraltete Eigenschaft: clear ist obsolet. Für Float-Verhalten die CSS-Eigenschaft clear verwenden.
Leeres Element:   kann keine Kindknoten enthalten. Ein appendChild() darauf funktioniert zwar im DOM, beim Parsen bzw. Serialisieren von HTML gehen die Kinder aber verloren.
Barrierefreiheit: Screenreader lesen   oft gar nicht vor oder nur als kurze Pause. Absätze gehören in , Abstände werden per CSS gesetzt.
Sicherheit: Text nicht mit text.replace(/\n/g, ' ') an innerHTML übergeben, weil das XSS ermöglicht. Besser createElement('br') und Textknoten verwenden, oder CSS white-space: pre-line.
contenteditable: Browser setzen in leere Zeilen oft ein Platzhalter-  ein. Beim Auswerten des Inhalts muss man das berücksichtigen.
Das Interface wird von allen Browsern seit jeher unterstützt.

Siehe auch

HTMLDocument HTMLHRElement HTMLElement HTMLLIElement HTMLPreElement