Ajouter du texte à l'élément en JavaScript

1. Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de appendChild
2. Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de textContent
3. Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de innerText

La modification du contenu DOM est la tâche la plus élémentaire en ce qui concerne les navigateurs. Parfois, nous souhaitons modifier le texte DOM en fonction de certaines actions sans restituer l’intégralité du DOM. Dans cet article, nous allons apprendre à ajouter du texte à un élément de texte existant en JavaScript via DOM.

Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de appendChild

DOM contient la liste des nœuds. Chaque nœud contient ses propres données. JavaScript permet d’ajouter la nouvelle instance de nœud à la liste des nœuds enfants existants dans le nœud parent sélectionné.

Syntaxe:

appendChild(aChild);

La fonction appendChild() prend le paramètre d’entrée d’un nœud nouvellement créé ou l’élément le plus courant qui doit être ajouté au nœud parent. appendChild() déplace l’enfant donné de son emplacement actuel vers le nouvel emplacement s’il fait référence à un nœud existant.

Il renvoie le nœud qui est l’enfant ajouté (un enfant), sauf lorsqu’un enfant est un DocumentFragment. Dans ce cas, le DocumentFragment vide est renvoyé. Pour plus d’informations, lisez la documentation de la méthode appendChild.

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode('Welcome to My channel');
const pNode = document.getElementById('p');
pNode.appendChild(text);

Dans l’exemple ci-dessus, nous avons créé le nœud de texte à l’aide document.createTextNode("Welcome to My channel"), puis l’avons ajouté au nœud p du document. La sortie du code ci-dessus créera un DOM comme ci-dessous.

Production :

"Hello Welcome to My channel"

Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de textContent

C’est la propriété de l’interface Node, qui représente le contenu textuel du nœud sélectionné et de ses descendants. JavaScript permet d’ajouter l’autre texte au contenu textuel actuel à partir des nœuds enfants dans le nœud parent sélectionné.

Syntaxe:

textContent = data;

La propriété textContent met à jour le contenu textuel du nœud sélectionné. Les utilisateurs peuvent modifier les données textuelles selon leurs besoins, telles que la concaténation, la mise à jour, etc. Si le nœud est un document ou un type de document, textContent renvoie null. textContent renvoie la concaténation du textContent de chaque nœud enfant pour les autres types de nœuds, à l’exception des commentaires et des instructions de traitement. Il s’agit d’une chaîne vide lorsqu’un nœud n’a pas d’enfant. Pour plus d’informations, lisez la documentation de la propriété textContent.

const pNode = document.getElementById('p');
pNode.textContent += 'Welcome to My channel';

Dans l’exemple ci-dessus, nous avons obtenu le nœud de paragraphe en utilisant document.getElementById("p") puis ajouté Welcome to my channel au contenu textuel existant du nœud de paragraphe. La sortie du code ci-dessus met à jour un DOM comme suit :

Production :

"Hello Welcome to My channel"

Ajouter du texte à un élément de texte existant en JavaScript via DOM à l’aide de innerText

Il appartient à l’élément HTMLElement. Cette propriété représente le contenu textuel rendu du nœud sélectionné et de ses descendants. JavaScript permet d’ajouter l’autre texte au contenu textuel actuel à partir des nœuds enfants dans le nœud parent sélectionné.

Syntaxe:

const renderedText = htmlElement.innerText
htmlElement.innerText = string

La propriété innerText met à jour le contenu textuel du nœud sélectionné. Les utilisateurs peuvent modifier les données textuelles selon leurs besoins, telles que la concaténation, la mise à jour, etc. Pour plus d’informations, consultez la documentation de la propriété innerText.

const pNode = document.getElementById('p');
pNode.innerText += 'Welcome to My channel';

Dans l’exemple ci-dessus, nous avons obtenu le nœud de paragraphe en utilisant document.getElementById("p"), puis ajouté Welcome to my channel au contenu textuel existant du nœud de paragraphe. La sortie du code ci-dessus met à jour un DOM comme suit :

Production :

"Hello Welcome to My channel"

La seule différence entre textContent et innerText est que textContent récupère le contenu de tous les éléments, y compris les éléments script et style. En revanche, innerText n’affiche que des éléments lisibles par l’homme. textContent renvoie tous les éléments du nœud. En revanche, innerText est soucieux du style et ne renvoie aucun texte à partir d’éléments cachés. En principe, innerText reconnaît l’apparence rendue du texte, mais pas textContent.