JavaScript modifie dynamiquement les éléments de la page HTML, tels que l'ajout ou la suppression-js tutoriel-php.cn

JavaScript modifie dynamiquement les éléments de la page HTML, tels que l'ajout ou la suppression

不言

Libérer： 2018-05-07 16:06:31

original

1807 Les gens l'ont consulté

Cet article présente principalement JavaScript pour modifier dynamiquement les éléments de la page HTML, tels que l'ajout ou la suppression. Il a une certaine valeur de référence. Maintenant, je le partage avec vous.

Éléments de la page HTML. peut être transmis dynamiquement aux modifications js, par exemple, vous pouvez ajouter des éléments au HTML ou supprimer un élément. Voici un exemple de code. Les amis intéressés ne devraient pas le manquer

Vous pouvez modifier dynamiquement des éléments en HTML via. JavaScript

Ajouter des éléments au HTML

Vous devez d'abord créer une balise, puis ajouter le contenu correspondant à la balise, puis ajouter la balise créée à l'emplacement correspondant .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function add(){ 
var element = document.createElement("p"); 
var node = document.createTextNode("添加新段落"); 
element.appendChild(node); 
x = document.getElementById("demo"); 
x.appendChild(element); 
} 
</script> 
</head> 
<body> 
<p id="demo"> 
<p>这是第一段</p> 
</p> 
<input type="button" value="按钮" onclick="add()" /> 
</body> 
</html>

Copier après la connexion

Supprimer un élément en HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function deleteE(){ 
var father = document.getElementById("demo"); 
var child = document.getElementById("p1"); 
father.removeChild(child); 
} 
</script> 
</head> 
<body> 
<p id="demo"> 
<p id="p1">这是第一段</p> 
<p id="p2">这是第二段</p> 
</p> 
<input type="button" value="删除" onclick="deleteE()" /> 
</body> 
</html>

Copier après la connexion

Recommandations associées :

Comprendre et utiliser les événements de synchronisation JavaScript

JavaScript ajoute dynamiquement l'élément Li

Résumé d'un exemple de méthode Javascript de création dynamique de balises HTML

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!