Recherche chaud: faire du vin de grenade Toyota fj cruiser reduire consommation montre numerique à base compteur 7490 les caracteristiques dune ode naphtaline achat quest ce quun caractere sequentiel aliments pour produire la bile four micro ondes rouille
Index Loisirs Santé Technologie

Chargement d'un DIV dans un autre DIV dynamiquement

Publié:2013-03-08Source: général
Advertisement

Chargement d'un DIV dans un autre DIV dynamiquement

Les sites Web dynamiques réagissent à l'entrée de l'utilisateur et de changer le contenu de la page. Plusieurs langages de script (script) peuvent obtenir cet effet. Un des plus facile et le plus populaire est d'utiliser JavaScript. Vous pouvez modifier le contenu d'éléments HTML, comme divs (contenu du récipient), basée sur une action, telle que cliquer sur une souris ou aller. Un clic de la souris peut créer un nouveau div dans un bouton contenu connexe existante, générant pressé. Suivez quelques étapes à cet effet.

Niveau de difficulté:

Modéré

Instructions

Instructions

1 Créer un div entre les balises body de votre site Web et d'identifier la div comme «vieille div." Il crée également un bouton que les utilisateurs Cliquez sur et sélectionnez la fonction JavaScript "newInnerDiv". Le code apparaît comme suit: <body> <div id = "oldDiv"> </ div> <type touche = "button" "bouton" class = onclick = "newInnerDiv ()"> Ajouter Div touche </> < / body>

2 crée la fonction "newInnerDiv" entre les balises head dans le document. La fonction obtient le div existante par son ID de "oldDiv," crée un nouvel élément div, créer un nouvel élément p (paragraphe) et de créer une chaîne de "Salut" à placer dans l'élément p. Div annexé l'ancien et le nouvel élément div définit l'identificateur de la nouvelle div "newDiv" ajoute le nouveau div avec le nouvel élément p et ajouter un nouvel élément p avec la nouvelle chaîne de texte "Salut". Faire un test au début de la fonction pour vérifier si cette div a déjà été créé une fois que l'utilisateur clique sur le bouton. Pas besoin de créer plusieurs divs. Un test simple pour cet exemple est de compter combien il divs. Si les numéros DIV actuellement sur la page est égal à 1, le code est exécuté: <script type = "text / javascript"> function newInnerDiv () {var checkDiv = document.getElementsByTagName ("div"); divNumber = var (checkDiv.length); si (divNumber == 1) {var changeContent = document.getElementById ("oldDiv"); addDiv var = document.createElement ("div"); newPara var = document.createElement ("p"); var newText = document.createTextNode ("Salut"); changeContent.appendChild (addDiv); addDiv.setAttribute ("id", "newDiv"); addDiv.appendChild (newPara); newPara.appendChild (newText);}} </ script>

3 ajoute des styles pour les deux divs entre les balises head qui sont faciles à voir divs pour tester la fonction. Assurez div vieille div rouge et jaune nouvelle petite et. Régler certains types de remplissage (gouttière) pour le bouton et les éléments de P, si désiré: <style type = "text / css"> #oldDiv {width: 200px; hauteur: 90px; border: mince noir solide; padding: 0 5px 5px 5px; background-color: red; position: relative; #newDiv} {background-color: jaune; largeur: 180px; margin: 10px; position: absolute; .button} {margin: 20px 0 0 0; } P {position: relative; float: left; padding: 10px; } </ Style>

4 Enregistrez la page et l'ouvrir dans un navigateur Web. Une boîte rouge et vide apparaît. Cliquez sur OK et le nouveau div sera généré, comme indiqué par sa couleur jaune et le texte "Salut". Regardez le "code source généré", si elle est disponible dans le navigateur, pour afficher la nouvelle div div et le contenu au sein de la vieille dans le codage HTML. Le code complet est comme suit: <html> <head> <style type = "text / css"> #oldDiv {width: 200px; hauteur: 90px; border: mince noir solide; padding: 0 5px 5px 5px; background-color: red; position: relative; #newDiv} {background-color: jaune; largeur: 180px; margin: 10px; position: absolute; .button} {margin: 20px 0 0 0; } P {position: relative; float: left; padding: 10px; } </ Style> <script type = "text / javascript"> function newInnerDiv () {var checkDiv = document.getElementsByTagName ("div"); divNumber = var (checkDiv.length); si (divNumber == 1) {var changeContent = document.getElementById ("oldDiv"); addDiv var = document.createElement ("div"); newPara var = document.createElement ("p"); var newText = document.createTextNode ("Salut"); changeContent.appendChild (addDiv); addDiv.setAttribute ("id", "newDiv"); addDiv.appendChild (newPara); newPara.appendChild (newText);}} </ script> </ head> <body> <div id = "oldDiv"> </ div> <bouton type = classe "bouton" = "button" onclick = "newInnerDiv () "> Ajouter Div touche </> </ body> </ html>

[Rédacteur: Admin]
Je vous imagine comme

Articles recommandés

Cliquez Top Ranking