Comment puis-je insérer une nouvelle ligne ou un retour à la ligne dans element.textContent ?

Question

Supposons que je veuille créer dynamiquement un nouvel élément DOM et remplir son texte avec un littéral de chaîne JS.
La chaîne est si longue que je voudrais la diviser en trois morceaux :

var h1 = document.createElement("h1");

h1.textContent = "Ceci est une chaîne très longue et je voudrais insérer un retour à la ligne ICI...
de plus, je voudrais insérer un autre retour à la ligne ICI... 
ainsi ce texte s'affichera sur une nouvelle ligne";

Le problème, c'est que si j'écris

h1.textContent = "...Je voudrais insérer un retour à la ligne ici... \n";

cela ne fonctionne pas, probablement parce que le navigateur considère le '\n' comme un simple texte et l'affiche en tant que tel (le \r ne fonctionne pas non plus).

En revanche, je pourrais changer h1.innerHTML au lieu du textContent et écrire :

h1.innerHTML = "...Je voudrais insérer un retour à la ligne ici...";

Ici, le
ferait le travail, mais ce faisant, cela remplacerait non seulement le contenu textuel mais tout le contenu HTML de mon h1, ce qui n'est pas tout à fait ce que je veux.

Y a-t-il un moyen simple de résoudre mon problème?
Je ne voudrais pas créer plusieurs blocs d'éléments juste pour avoir le texte sur différentes lignes.

Answer 1

En utilisant la balise pre en HTML, nous pouvons directement formater en utilisant des chaînes d'échappement standard comme '\n' ou '\r';

HTML:

JS:

const identifierDisplay = document.getElementById("identifier");
const identifierS = "Données à afficher. \n Quelques données supplémentaires"
identifierDisplay.textContent = identifierS;

Veillez à la mise en forme dans la chaîne, tout tabulation ou espace est directement reflété.

Answer 2

Un moyen de le faire tout en restant sûr des injections XSS est le suivant :

function newLines(element, lines, separator = "!newline!") {
    element.textContent = lines.join(separator);
    element.innerHTML = element.innerHTML.replaceAll(separator, "");
}

Et vous pouvez l'appeler comme ça

newLines(h1, ["a", "b", "c", "alert(2)"])

L'idée est d'abord de mettre tout le contenu dans textContent, d'injecter le séparateur aux bons endroits puis de remplacer le séparateur par

Answer 3

Le code suivant fonctionne bien (sur FireFox, IE et Chrome) :

var display_out = "Ceci est la ligne 1" + "" + "Ceci est la ligne 2";

document.getElementById("demo").innerHTML = display_out;

Answer 4

La réponse de Nelek en haut est une excellente réponse pour du texte multi-ligne. Ajoutons simplement l'utilisation des littéraux de gabarit. Avec Littéraux de gabarit \r\n non requis.

var h1 = document.createElement("h1");

// en réglant la propriété css white-space pour obtenir une nouvelle ligne dans textContent
h1.setAttribute('style', 'white-space: pre-line;');

// utiliser des littéraux de gabarit `` pour ajouter des retours chariots directement dans le script
// les nouvelles lignes dans le script seront assorties aux nouvelles lignes dans textContent
h1.textContent = `Ceci est une très longue chaîne et je voudrais insérer un retour chariot
de plus, je voudrais insérer un autre retour chariot
ainsi ce texte s'affichera sur une nouvelle ligne`;

document.body.appendChild(h1);

Answer 5

Après avoir lu la réponse de Lajos Arpad, j'ai simplement essayé

h1.textContent = "Bonjour\nTout le monde";
h1.innerHTML = h1.innerHTML.replaceAll("\n", "");

et ça fonctionnait. Il affiche la chaîne telle quelle (c'est-à-dire garde les guillemets, < et >).

Texte initial
Texte initial
Texte initial

<!-- Les sauts de ligne disparaissent -->
var h1 = document.getElementById('text1');
h1.textContent = "Bonjour\nTout le monde";

h1 = document.getElementById('text2');
h1.textContent = 'He"llo\nWo"r\'l\'d';
h1.innerHTML = h1.innerHTML.replaceAll("\n", "<br>");

h1 = document.getElementById('text3');
var maliciousText = "<script>alert('Attaque XSS!')</scr" + "ipt>";
h1.textContent = maliciousText;
h1.innerHTML = h1.innerHTML.replaceAll("\n", "<br>");