Wie ersetze ich mithilfe von JavaScript ein HTML-Element durch ein anderes Element?-js-Tutorial-php.cn

如何使用 JavaScript 将 HTML 元素替换为另一个元素？

In diesem Tutorial lernen wir, wie man mithilfe von JavaScript ein HTML-Element durch ein anderes Element ersetzt.

In einigen Anwendungsfällen müssen wir ein gesamtes HTML-Element durch ein anderes Element ersetzen. Dies ist beispielsweise bei der Formularvalidierung sehr wichtig. Angenommen, wir erhalten das Alter des Benutzers aus einem Formular und der Benutzer gibt das falsche Alter ein. Wir können eine Validierungsmeldung anzeigen, indem wir das HTML-Element ersetzen. Ein weiterer Anwendungsfall, bei dem wir ein HTML-Element durch ein anderes HTML-Element ersetzen müssen, ist das dynamische Laden von Inhalten, bei dem wir Webseiteninhalte basierend auf bestimmten Bedingungen wie Standort usw. anzeigen müssen.

Hier lernen wir drei Möglichkeiten kennen, HTML-Elemente auf Webseiten zu ersetzen.

Verwenden Sie die Methode replaceWith()

Die erste Methode verwendet die Methode replaceWith(). Wir müssen die Methode replaceWith() ausführen, indem wir das vorherige Element als Referenz nehmen und ein neues Element als Referenz übergeben. Wir können ein neues Element im String-Format erstellen.

Grammatik

Benutzer können die Javascript-Methode replaceWith() verwenden, um ein HTML-Element durch ein anderes HTML-Element gemäß der folgenden Syntax zu ersetzen.

oldElement.replaceWith(newElement);

Nach dem Login kopieren

In der obigen Syntax ist oldElement ein ersetzbares Element und newElement ein ersetztes Element.

Beispiel

Im Beispiel unten haben wir ein div-Element in HTML, das die ID „oldElement“ enthält. Wir rufen die Funktion „ReplaceElement()“ auf, wenn auf die Schaltfläche geklickt wird. In der Funktion „replaceElement()“ erstellen wir mit der Methode „createElement()“ ein neues „h2“-Element. Darüber hinaus verwenden wir das textContent-Attribut, um Inhalte zum neu erstellten HTML-Element hinzuzufügen. Danach ersetzen wir oldElement durch newElement mit der Methode replaceWith().

In der Ausgabe kann der Benutzer auf die Schaltfläche klicken und die Änderungen auf der Webseite sehen.

<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>

Nach dem Login kopieren

Verwenden Sie das äußereHTML-Attribut

Das äußereHTML-Attribut eines beliebigen Elements ermöglicht es uns, das gesamte HTML-Element durch ein anderes HTML-Element zu ersetzen. Wir müssen dem Attribut „outerHTML“ einen neuen Elementwert zuweisen, um das HTML-Element zu ersetzen.

Grammatik

Benutzer können ein HTML-Element durch ein anderes HTML-Element ersetzen, indem sie das äußereHTML-Attribut gemäß der folgenden Syntax verwenden.

document.getElementById(id).outerHTML = newEle;

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel haben wir ein „

“-Element erstellt, das eine „para“-ID und etwas Textinhalt enthält. In der Funktion replaceElement() erstellen wir ein neues HTML-Element im String-Format und weisen seinen Wert dem äußereHTML-Attribut des „

“-Elements zu.

In der Ausgabe sollte der Benutzer auf die Schaltfläche klicken, um das „

“-Element durch das „

“-HTML-Element zu ersetzen.

<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>

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel haben wir ein Auswahlmenü mit verschiedenen Optionen erstellt. Hier ersetzen wir die spezifischen Optionen des Auswahlmenüs. Zusätzlich erstellen wir zwei Eingabefelder. Eine besteht darin, die Indexnummer abzurufen, die andere darin, den neuen Optionswert des Benutzers abzurufen.

In der Funktion replaceOption() erhalten wir den neuen Eingabewert vom Benutzer. Danach greifen wir auf die Option zu, indem wir den vom Benutzer in der Eingabe eingegebenen Indexwert verwenden. Als nächstes ersetzen wir die Option durch den neuen Wert, indem wir das äußereHTML-Attribut der Option verwenden.

Geben Sie in der Ausgabe den auf Null basierenden Indexwert in das erste Eingabefeld ein, geben Sie den neuen Optionswert in das zweite Eingabefeld ein und klicken Sie auf die Schaltfläche, um die Option zu ersetzen.

<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>

Nach dem Login kopieren

Verwenden Sie die Methode replaceChild()

Mit der Methode

replaceChild() können Entwickler die untergeordneten Knoten eines bestimmten HTML-Elements durch ein neues Element ersetzen. Hier können wir das erste untergeordnete Element eines bestimmten Elements ersetzen, um sich selbst durch das neue Element zu ersetzen.

Grammatik

Benutzer können die Methode replaceChild() verwenden, um ein HTML-Element durch ein anderes HTML-Element gemäß der folgenden Syntax zu ersetzen.

oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);

Nach dem Login kopieren

In der obigen Syntax müssen wir das neue Element als ersten Parameter der Methode replaceChild() und das alte Element als zweiten Parameter übergeben.

Beispiel

Im folgenden Beispiel erstellen wir zunächst das Element „h3“ mit der Methode createElement(). Anschließend verwenden wir die Methode createTextNode(), um den Textinhalt zu erstellen. Anschließend hängen wir den Textknoten mit der Methode appendChild() an das neu erstellte HTML-Element an.

Als nächstes führen wir die Methode replaceChild() aus, indem wir auf das alte Element verweisen. Darüber hinaus haben wir HTMLele als ersten Parameter (ein neu erstelltes Element) und oldEle.childNodes[0] als zweiten Parameter (das erste untergeordnete Element des alten Elements, das sich selbst darstellt) übergeben.

Klicken Sie in der Ausgabe auf die Schaltfläche und beobachten Sie die Änderungen auf der Webseite.

<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>

Nach dem Login kopieren

Wir haben drei verschiedene Möglichkeiten kennengelernt, mit JavaScript ein HTML-Element durch ein anderes zu ersetzen. Bei der ersten Methode haben wir die Methode replaceWith() verwendet, eine der besten und einfachsten Methoden. In der zweiten Methode verwenden wir das Attribut „outerHTML“; in der dritten Methode verwenden wir die Methode „replaceChild()“, die im Allgemeinen zum Ersetzen untergeordneter Elemente verwendet wird.

Das obige ist der detaillierte Inhalt vonWie ersetze ich mithilfe von JavaScript ein HTML-Element durch ein anderes Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!