Dans ce tutoriel, nous apprendrons à remplacer un élément HTML par un autre élément en utilisant JavaScript.
Dans certains cas d'utilisation, nous devons remplacer un élément HTML entier par un élément différent. Par exemple, c’est très important dans la validation des formulaires. Supposons que nous obtenions l'âge de l'utilisateur à partir d'un formulaire et que l'utilisateur entre un âge incorrect ; nous pouvons afficher un message de validation en remplaçant l'élément HTML. Un autre cas d'utilisation dans lequel nous devons remplacer un élément HTML par un autre élément HTML est le chargement de contenu dynamique, dans lequel nous devons afficher le contenu d'une page Web en fonction de certaines conditions telles que l'emplacement, etc.
Ici, nous allons apprendre 3 façons de remplacer les éléments HTML sur les pages Web.
Utilisez la méthode replaceWith()
La première méthode utilise la méthode replaceWith(). Nous devons exécuter la méthode replaceWith() en prenant l'élément précédent comme référence et en passant un nouvel élément comme référence. Nous pouvons créer un nouvel élément au format chaîne.
Grammaire
Les utilisateurs peuvent utiliser la méthode Javascript replaceWith() pour remplacer un élément HTML par un autre élément HTML selon la syntaxe suivante.
oldElement.replaceWith(newElement);
Copier après la connexion
Dans la syntaxe ci-dessus, oldElement est un élément remplaçable et newElement est un élément remplacé.
Exemple
Dans l'exemple ci-dessous, nous avons un élément div en HTML qui contient l'identifiant "oldElement". Nous appelons la fonction ReplaceElement() lorsque le bouton est cliqué. Dans la fonction replaceElement(), nous créons un nouvel élément "h2" en utilisant la méthode createElement(). De plus, nous utilisons l'attribut textContent pour ajouter du contenu à l'élément HTML nouvellement créé. Après cela, nous remplaçons oldElement par newElement en utilisant la méthode replaceWith().
Dans la sortie, l'utilisateur peut cliquer sur le bouton et voir les modifications sur la page Web.
<html>
<body>
<h3> Using the <i> replaceWith() method </i> to replace the HTML elements in JavaScript </h3>
<div id = "oldElement"> This div is the old element. </div>
<button onclick = "replaceElement()"> Replace Element </button>
<script>
function replaceElement() {
var newElement = document.createElement('h2');
newElement.textContent = 'This element is the new element.';
var oldElement = document.getElementById('oldElement');
oldElement.replaceWith(newElement);
}
</script>
</html>
Copier après la connexion
Utiliser l'attribut externalHTML
L'attribut externalHTML de n'importe quel élément nous permet de remplacer l'intégralité de l'élément HTML par un autre élément HTML. Nous devons attribuer une nouvelle valeur d'élément à l'attribut externalHTML pour remplacer l'élément HTML.
Grammaire
Les utilisateurs peuvent remplacer un élément HTML par un autre élément HTML en utilisant l'attribut externalHTML selon la syntaxe suivante.
document.getElementById(id).outerHTML = newEle;
Copier après la connexion
Exemple
Dans l'exemple ci-dessous, nous avons créé un élément "
" contenant un identifiant "para" et du contenu textuel. Dans la fonction replaceElement(), nous créons un nouvel élément HTML au format chaîne et attribuons sa valeur à l'attribut externalHTML de l'élément "
".
Dans la sortie, l'utilisateur doit cliquer sur le bouton pour remplacer l'élément "
" par l'élément HTML "
".
<html>
<body>
<h3> Using the <i> outerHTML property </i> to replace the HTML elements in JavaScript </h3>
<p id = "para"> Welcome to the TutorialsPoint! </p>
<button onclick = "replaceElement()"> Replace Element </button>
<script>
function replaceElement() {
let newEle = '<h2> You clicked the button to replace the element. <h2>';
document.getElementById('para').outerHTML = newEle;
}
</script>
</html>
Copier après la connexion
Exemple
Dans l'exemple ci-dessous, nous avons créé un menu de sélection avec différentes options. Nous remplacerons ici les options spécifiques du menu de sélection. De plus, nous créons deux champs de saisie. L'une consiste à obtenir le numéro d'index et l'autre à obtenir la nouvelle valeur d'option de l'utilisateur.
Dans la fonction replaceOption(), nous obtenons la nouvelle valeur d'entrée de l'utilisateur. Après cela, nous accédons à l'option en utilisant la valeur d'index saisie par l'utilisateur dans l'entrée. Ensuite, nous remplaçons l'option par la nouvelle valeur en utilisant l'attribut externalHTML de l'option.
Dans la sortie, entrez la valeur de l'index de base zéro dans le premier champ de saisie, entrez la nouvelle valeur de l'option dans le deuxième champ de saisie et cliquez sur le bouton pour remplacer l'option.
<html>
<body>
<h3> Using the <i> outerHTML property </i> to replace the options in the select menu </h3>
<label for = "indexInput"> Index: </label>
<input type = "number" id = "indexInput"> <br> <br>
<label for = "valueInput"> New Value: </label>
<input type = "text" id = "valueInput"> <br> <br>
<select id = "demo">
<option value = "1"> One </option>
<option value = "2"> Two </option>
<option value = "3" selected> Three </option>
<option value = "4"> Four </option>
<option value = "5"> Five </option>
<option value = "6"> Six </option>
</select>
<button onclick = "replaceOption()"> Replace Option </button>
<script>
function replaceOption() {
// get user input
var index = parseInt(document.getElementById('indexInput').value);
var newValue = document.getElementById('valueInput').value;
var list = document.getElementById('demo');
// get the option to replace
var option = list.options[index];
// replace the option
option.outerHTML = '<option value="' + newValue + '">' + newValue + '</option>';
}
</script>
</html>
Copier après la connexion
Utilisez la méthode replaceChild()
La méthode
replaceChild() permet aux développeurs de remplacer les nœuds enfants d'un élément HTML spécifique par un nouvel élément. Ici, nous pouvons remplacer le premier élément enfant d'un élément spécifique pour se remplacer par le nouvel élément.
Grammaire
Les utilisateurs peuvent utiliser la méthode replaceChild() pour remplacer un élément HTML par un autre élément HTML selon la syntaxe suivante.
oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
Copier après la connexion
Dans la syntaxe ci-dessus, nous devons passer le nouvel élément comme premier paramètre de la méthode replaceChild() et l'ancien élément comme deuxième paramètre.
Exemple
Dans l'exemple ci-dessous, nous créons d'abord l'élément "h3" en utilisant la méthode createElement(). Après cela, nous utilisons la méthode createTextNode() pour créer le contenu texte. Après cela, nous ajoutons le nœud de texte à l'élément HTML nouvellement créé à l'aide de la méthode appendChild().
Ensuite, nous exécutons la méthode replaceChild() en référençant l'ancien élément. De plus, nous avons passé HTMLele comme premier paramètre (un élément nouvellement créé) et oldEle.childNodes[0] comme deuxième paramètre (le premier élément enfant de l'ancien élément, se représentant).
Dans la sortie, cliquez sur le bouton et observez les modifications sur la page Web.
<html>
<body>
<h3> Using the <i> replaceChild() method </i> to replace the HTML elements in JavaScript </h3>
<p id = "para"> Welcome to the TutorialsPoint! </p>
<button onclick = "replaceElement()"> Replace Element </button>
<script>
function replaceElement() {
// create a new element
var HTMLele = document.createElement("h3");
// create a new text node
var txt = document.createTextNode("This is a content of new element!");
// use appendChild() to add a text node to the element
HTMLele.appendChild(txt);
var oldEle = document.getElementById("para");
// using replaceChild() to replace the old element with a new element
oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
}
</script>
</html>
Copier après la connexion
Nous avons appris trois façons différentes de remplacer un élément HTML par un autre à l'aide de JavaScript. Dans la première méthode, nous avons utilisé la méthode replaceWith(), qui est l’une des méthodes les meilleures et les plus simples. Dans la deuxième méthode, nous utilisons l'attribut externalHTML ; dans la troisième méthode, nous utilisons la méthode replaceChild(), qui est généralement utilisée pour remplacer les éléments enfants.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
