Alsacreations.com - Apprendre - Archives (avril 2013)

Les dernières ressources publiées sur Alsacreations.com

Tutoriel : Créer une police d’icônes facilement à partir d’illustrations vectorielles

Le: 10 04 2013 à 17:45 Auteur: Stéphanie W.

Les polices d'icônes ou "font-icon" popularisées depuis Bootstrap sont de plus en plus utilisées sur le web. Certains services proposent de piocher des icônes dans différents packs pour se créer sa propre "police". Dans ce petit tutoriel nous verrons comment, grâce au service en ligne IcoMoon, il est facile de se créer sa propre police d'icônes à partir d'illustrations et fichiers vectoriels. [...]

Retrouvez l'intégralité de ce tutoriel multi-pages en ligne

Astuce : La méthode insertAdjacentHTML

Le: 08 04 2013 à 14:37 Auteur: dew

La méthode insertAdjacentHTML est peu connue en JavaScript et pourtant bien utile. Si vous avez déjà souhaité manipuler dynamiquement du contenu HTML dans une page ou application web, vous avez certainement déjà utilisé les méthodes createNode() + appendChild() ou la propriété innerHTML, qui donne un accès direct au contenu d'un élément :

Exemple de code avec innerHTML

<div id="mondiv"></div>
<script>
document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">';
</script>

Mais cela remplace directement tout le contenu de l'élément (à moins de le récupérer avant par une pirouette).

Pour insérer du contenu en choisissant l'emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres :

la position d'insertion avec les mots clés :

beforeBegin

avant l'élément (équivalent à before en jQuery)

afterBegin

à l'intérieur au début (équivalent à prepend en jQuery)

beforeEnd

à l'intérieur à la fin (équivalent à append en jQuery)

afterEnd

après l'élément (équivalent à after en jQuery)
le code HTML à insérer

Exemple de code avec insertAjdacentHTML

<ul id="maliste">
  <li>Printemps</li>
  <li>Été</li>
  <li>Automne</li>
</ul>
<script>
document.getElementById('maliste').insertAdjacentHTML('beforeEnd','<li>Hiver</li>');
</script>

Prise en charge

Au niveau compatibilité, c'est une méthode désormais largement reconnue par les moteurs de navigateurs.