Maison > Article > interface Web > JavaScript modifie dynamiquement les éléments de la page HTML, tels que l'ajout ou la suppression
JavaScript modifie dynamiquement les éléments de la page HTML, tels que l'ajout ou la suppression
- 不言original
- 2018-05-07 16:06:311736parcourir
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>
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>
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!