La création dynamique d'éléments HTML à l'aide de Javascript?

Vous pouvez créer un élément à l'aide de document.createElement. Après la création, vous pouvez ajouter des attributs. Si vous souhaitez que l'élément à afficher dans votre document, vous devez insérer dans le DOM-arbre du document. Essayez de jouer un peu avec ce code:

var body = document.getElementsByTagName('body')[0],
    newdiv = document.createElement('div');   //create a div
    newdiv.id = 'newid';                      //add an id
    body.appendChild(newdiv);                 //append to the doc.body
    body.insertBefore(newdiv,body.firstChild) //OR insert it

Si c'est uniquement du html que vous voulez, c'est une approche:

function createmyElements(id1,id2,id3){
   return [
           '<a href="some link" id="',
            id1,
           '">linktxt</a>',
           '<div id="" ',
            id2,
           '"></div>',
           '<someElement id="',
            id3,
           '"></someElement>'
          ].join('\n');
}

Pourtant, une autre approche est de créer un div sans l'injecter dans l'arborescence du DOM et ajouter des éléments à l'aide de méthodes du DOM. Voici une fonction pour créer 1 élément

function createElementHtml(id,tagname){
  var containerdiv = document.createElement('div'),
      nwtag = document.createElement(tagname);
  nwtag.id = id;
  containerdiv.appendChild(nwtag);
  return containerdiv.innerHTML;
}
//usage
createElementHtml('id1','div'); //=> <div id="id1"></div>

OriginalL'auteur KooiInc

Html:

<div id="main"></div>

JavaScript:

var tree = document.createDocumentFragment();
var link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://site.com");
link.appendChild(document.createTextNode("linkText"));

var div = document.createElement("div");
div.setAttribute("id", "id2");
div.appendChild(document.createTextNode("divText"));

tree.appendChild(link);
tree.appendChild(div);
document.getElementById("main").appendChild(tree);

La principale raison de l'utilisation d'un documentFragment au lieu de simplement ajouter les éléments directement est la rapidité d'exécution.

À cette dimension, il n'a pas d'importance, mais lorsque vous commencez à ajouter des centaines d'éléments, vous apprécierez de le faire en mémoire de la première 🙂

Avec documentFragment vous pouvez construire tout un arbre de DOM-éléments en mémoire et ne sera pas afffect le navigateur DOM jusqu'au dernier moment.

Sinon, il force le navigateur à jour pour chaque élément, ce qui peut parfois être une vraie douleur à regarder.

OriginalL'auteur Guidhouse

Si vous êtes en train de faire cela à plusieurs reprises (de la création dynamique d'HTML), vous pourriez vouloir utiliser une approche plus générale.

Si vous souhaitez créer trois sans rapport avec les éléments, vous pouvez faire:

var anchor = elem("a", {"id":"id1"});
var div    = elem("div", {"id":"id2"});
var xyz    = elem("div", {"id":"id3"});

Maintenant, vous disposez de trois éléments. Si vous souhaitez obtenir le code HTML de ces (sous forme de chaîne), il suffit de faire:

var html = anchor.outerHTML + div.outerHTML + xyz.outerHTML;

Si vous voulez avoir ces trois dans un élément (par exemple, div), faites:

var div = elem("div", null, [
    elem("a", {"id":"id1"}),
    elem("div", {"id":"id2"}),
    elem("div", {"id":"id3"}),
]);

Vous pouvez obtenir le code HTML avec div.outerHTML, ou vous pouvez simplement ajouter n'importe où vous le souhaitez.

Pour en savoir plus sur elem(), visite element.js (GitHub).

_{je suis en ajoutant cette réponse n'est pas pour les 8 ans, mais pour les futurs visiteurs. L'espoir, ça aide.}

OriginalL'auteur akinuri