Dyrk

Bonjour à tous !!!

Alors voilà ...
Comme je vous le disais hier, j'ai développé une version pour Firefox de mon gestionnaire de mot de Passe chiffré.

Ce n'est pas sans surprise, que j'ai découvert que la validation des extensions chez Mozilla, se faisait à la "main" ... par de VRAIES personnes ...

Aussi ...
Je ne remercierais jamais suffisamment "Leszek Życzkowski" ...
Sans qui, de par son refus ... cet article n'aurait jamais vu le jour ...

Bref blablabla blabla qui dit que mon extension n'a pas été validée ...
Car elle effectue des assignations avec d'innerHTML ...

Alors oui ...
Quand on a un contenu un peu dynamique ...
Quand on doit injecter dans une page ... un contenu créé de toutes pièces ...

C'est un peu plus court de faire  :

document.getElementById('toto').innerHTML = '<div id="madiv"><br><b>I am an Hero</b><br><i class='desc'>And a Winner</div>';

Que de faire  ça :

//Parent div
el = document.createElement('div');
el.id = 'madiv';
el.appendChild(document.createElement('br'));
//Title
title = document.createElement('b');
title.innerText = 'I am an Hero';
el.appendChild(title);
el.appendChild(document.createElement('br'));
//Subtitle
subtitle = document.createElement('i');
subtitle.class = 'desc';
subtitle.innerText='And a Winner';
el.appendChild(subtitle);
//finish
document.getElementById('toto').appendChild(el);

Bien entendu ... plus court, ne veut pas forcément dire "mieux", même si l'autre méthode est plus longue elle reste plus "propre".

Enfin bon ...

J'ai pensé à tous ceux qui souhaitent by-passer un peu ce genre de test, et soumettre des scripts avec un équivalent de innerHTML !!!!

L'idée, c'est une fonction, à laquelle sont envoyés, l'id de l'élément auquel on souhaite assigner du HTML, en utilisant la manière "propre".
Mais, je vous rassure, sans avoir à se taper la création de chaque élément à la main ...

/*
*
*	ByPass InnerHTML
*
*/

function HTMLBuilder(id, htmli){
	var parser = new DOMParser();
	var nid = 'sub_'+id;
	var htmli = "<br /><div id='"+nid+"'>"+htmli+"</div><p>";
	var doc = parser.parseFromString(htmli, "text/html");
	var el = document.getElementById(id).firstChild ? true : false;
	if (el) document.getElementById(id).removeChild( document.getElementById(id).firstChild);
	document.getElementById(id).appendChild(doc.getElementById(nid));
	return (doc);
}

Aussi, avec cette fonction, vous n'aurez plus qu'à remplacer ceci :

document.getElementById('toto').innerHTML = '<div id="madiv"><br><b>I am an Hero</b><br><i class='desc'>And a Winner</div>';

Par ceci :

HTMLBuilder('toto', '<div id="madiv"><br><b>I am an Hero</b><br><i class='desc'>And a Winner</div>');