JavaScript DOM - changer le HTML

HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.

document.write()

En JavaScript, document.write() peut être utilisé pour écrire du contenu directement dans le flux de sortie HTML.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
   <p>当前时间是：
    <script type="text/javascript">
    document.write("<strong>"+(new Date()).toString()+"</strong>");
    </script>
    </p>
</body>
</html>

N'utilisez jamais document.write() une fois le chargement du document terminé. Cela écrasera le document. L'attribut innerHTML est utilisé pour définir ou renvoyer le contenu HTML entre les balises spécifiées.

Syntaxe :

document.getElementById(id).innerHTML=new HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>

Modifier les attributs HTML

Syntaxe : document.getElementById(id).attribute=nouvel attribut Le value

attribut est un nœud d'attribut. Chaque élément DOM a un attribut d'attributs correspondant pour stocker tous les nœuds d'attribut. Les attributs sont une classe Le conteneur d'un. array, pour être précis, est NameNodeMap. En bref, c'est un conteneur similaire à un tableau mais différent d'un tableau. Chaque index numérique d'attributs stocke un nœud d'attribut sous la forme d'une paire nom-valeur (name="value").

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
      var dir = "left";
        function setDir()
        {
        dir = (dir=="left") ? "right" : "left";
        document.getElementById( "Mar" ).direction = dir;
        }
</script>
</head>
<body>
<marquee id="Mar">欢迎光临！</marquee>
<p><button onclick="setDir()">改变方向</button></p>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> var dir = "left"; function setDir() { dir = (dir=="left") ? "right" : "left"; document.getElementById( "Mar" ).direction = dir; } </script> </head> <body> <marquee id="Mar">欢迎光临！</marquee> <p><button onclick="setDir()">改变方向</button></p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

JavaScript DOM - changer le HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]