JavaScript ändert Div-Inhalte

Bei der Front-End-Entwicklung ist es häufig erforderlich, JavaScript zu verwenden, um den Inhalt der Seite zu ändern, insbesondere um den Inhalt im div-Element zu ändern. In diesem Artikel wird erläutert, wie Sie mit JavaScript den Inhalt in div-Elementen ändern.

1. Ändern Sie das

innerHTML-Attribut, um HTML-Inhalte über das innerHTML-Attribut zurückzugeben oder festzulegen. Durch Ändern des innerHTML-Attributs können wir den Inhalt im div-Element ändern. Zum Beispiel:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "修改后的内容";
}
</script>

Nachdem Sie auf die Schaltfläche geklickt haben, wird der Inhalt im Div in „geänderter Inhalt“ geändert.

Es ist zu beachten, dass das innerHTML-Attribut beliebige HTML-Tags und -Attribute festlegen kann. Zum Beispiel:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "<p style='color: red;'>修改后的内容</p>";
}
</script>

Dieses Beispiel ändert den Inhalt im div in ein rotes Absatz-Tag.

2. Ändern Sie über das textContent-Attribut.

Wenn wir nur den Textinhalt im div-Element ändern möchten, können wir das textContent-Attribut verwenden. Die Eigenschaft textContent gibt den Textinhalt im aktuellen Element zurück oder legt ihn fest, wobei HTML-Tags und -Attribute ignoriert werden. Zum Beispiel:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").textContent = "修改后的文本内容";
}
</script>

Nachdem Sie auf die Schaltfläche geklickt haben, wird der Inhalt im Div in „geänderter Textinhalt“ geändert.

3. Ändern Sie mit den Methoden createElement und appendChild.

createElement und appendChild sind zwei häufig verwendete DOM-Methoden, die zum Erstellen und Einfügen neuer HTML-Elemente verwendet werden. Mit diesen beiden Methoden können wir den Inhalt im div-Element ändern.

Zum Beispiel können wir zuerst ein neues p-Tag erstellen und es dann zum div-Element hinzufügen. Der Code lautet wie folgt:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    var newP = document.createElement("p");
    var newText = document.createTextNode("修改后的内容");
    newP.appendChild(newText);
    document.getElementById("myDiv").appendChild(newP);
}
</script>

Nach dem Klicken auf die Schaltfläche erhält das Div ein neues p-Tag mit dem Inhalt „geänderter Inhalt“.

Es ist zu beachten, dass die über die Methoden createElement und appendChild hinzugefügten neuen Elemente basierend auf dem ursprünglichen Inhalt neu hinzugefügt werden. Wenn Sie den ursprünglichen Inhalt ersetzen müssen, können Sie das innerHTML- oder textContent-Attribut verwenden.

Zusammenfassend lässt sich sagen, dass es sehr praktisch ist, JavaScript zum Ändern des Inhalts von div-Elementen zu verwenden. Wir können je nach Bedarf verschiedene Methoden auswählen. Für weitere Inhalte zu JavaScript folgen Sie bitte weiterhin meinem Blog!

Das obige ist der detaillierte Inhalt vonJavaScript ändert Div-Inhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!