JavaScript modifie le contenu div

Dans le développement front-end, JavaScript est souvent utilisé pour modifier le contenu de la page, notamment le contenu de l'élément div. Cet article explique comment utiliser JavaScript pour modifier le contenu des éléments div.

1. Modifiez l'attribut innerHTML via l'attribut

innerHTML pour renvoyer ou définir le contenu HTML. En modifiant l'attribut innerHTML, nous pouvons changer le contenu de l'élément div. Par exemple :

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

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

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

Après avoir cliqué sur le bouton, le contenu du div sera modifié en "contenu modifié".

Il convient de noter que l'attribut innerHTML peut définir n'importe quelle balise et attribut HTML. Par exemple :

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

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

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

Cet exemple modifie le contenu du div en une balise de paragraphe rouge.

2. Modifier via l'attribut textContent

Si nous souhaitons uniquement modifier le contenu du texte dans l'élément div, nous pouvons utiliser l'attribut textContent. La propriété textContent renvoie ou définit le contenu du texte dans l'élément actuel, où les balises et attributs HTML sont ignorés. Par exemple :

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

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

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

Après avoir cliqué sur le bouton, le contenu du div sera modifié en "contenu texte modifié".

3. Modifier via les méthodes createElement et appendChild

createElement et appendChild sont deux méthodes DOM couramment utilisées pour créer et insérer de nouveaux éléments HTML. Nous pouvons modifier le contenu de l'élément div grâce à ces deux méthodes.

Par exemple, nous pouvons d'abord créer une nouvelle balise p puis l'ajouter à l'élément div. Le code est le suivant :

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

Après avoir cliqué sur le bouton, le div aura une nouvelle balise p avec le contenu "contenu modifié".

Il convient de noter que les nouveaux éléments ajoutés via les méthodes createElement et appendChild sont nouvellement ajoutés en fonction du contenu d'origine. Si vous devez remplacer le contenu d'origine, vous pouvez utiliser l'attribut innerHTML ou textContent.

Pour résumer, il est très pratique d'utiliser JavaScript pour modifier le contenu des éléments div Nous pouvons choisir différentes méthodes pour fonctionner en fonction de nos besoins. Pour plus de contenu sur JavaScript, continuez à suivre mon blog !

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!