Création dynamique d'éléments HTML en utilisant Javascript?

Je veux créer dynamiquement des éléments HTML (élément 3 html), puis renvoyer ce code html sous forme de chaîne dans une variable. Je ne veux pas écrire le code HTML dans la fonction suivante à certains div, mais, je veux le retourner dans un var.Création dynamique d'éléments HTML en utilisant Javascript?

function createMyElements(id1,id2,id3){ 

    //create anchor with id1 
    //create div with id 2 
    //create xyz with id3 

    //now return the html code of above created just now 

}

Comment est-ce que je peux faire ceci?

Source

2011-04-04 dojoX

Voulez-vous créer 'elements', ou souhaitez-vous créer des représentations de' CHAINE' des éléments? – tcooc

html code d'elemets dans un var et enfin je vais faire document.getElementbyID ("yu"). InnerHTML = var_containing_code – dojoX

Vous pouvez construire le code html comme une chaîne dans une variable comme

var html = ""; 
html += "<a id='" + id1 +"'>link</a>"; 
html += "<div id='" + id1 +"'>div</div>"; 
// ... and so on

vous retourner le code html variables

return html;

Source

2011-04-04 09:24:27 Sufendy

JavaScript a de belles méthodes DOM qui gèreront échapper et whatnot pour vous, tout en fournissant une syntaxe plus lisible alors cette erreur mashing de chaîne encline. – Quentin

oui, je sais, et vous pouvez même le faire mieux et moins sujet aux erreurs en utilisant jquery. – Sufendy

Vous pouvez créer un élément à l'aide document.createElement. Après la création, vous pouvez ajouter des attributs. Si vous voulez que l'élément apparaisse dans votre document, vous devez l'insérer dans l'arborescence DOM du document. Essayez de jouer 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 cela ne vous html voulez que 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'); 
}

Une autre approche est de créer un div sans l'injecter dans l'arbre DOM et ajouter des éléments à cela en utilisant des méthodes 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>

Source

2011-04-04 09:30:31 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 d'utiliser un DocumentFragment au lieu de simplement ajouter les éléments directement la vitesse de exécution.

A cette taille n'a pas d'importance, mais quand vous commencez à ajouter des centaines d'éléments, vous apprécierez le faire en mémoire :-) première

Avec DocumentFragment, vous pouvez construire un arbre entier d'éléments DOM- en mémoire et n'affectera pas le navigateur DOM jusqu'au dernier moment.

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

Source

2011-04-04 09:39:27 Guidhouse

Je me souviens avoir eu une discussion à SO à ce sujet: l'utilisation d'un div in memory ne devrait pas avoir d'inconvénients à utiliser un documentFragment. La discussion peut être trouvé @ http://stackoverflow.com/questions/4538093/what-is-the-fastest-way-to-create-a-select-tag-with-5000-options-in-ie6/4538387# 4538387. Je pense que Tim Down avait raison. – KooiInc

En outre, vous voudrez peut-être lire le commentaire de * Raziel * (30 Juillet 2008 à 13h10) @ http://ejohn.org/blog/dom-documentfragments/#postcomment – KooiInc

@Kooilnc Merci pour les deux pointeurs. Surtout le plus tard. Le point principal est toujours les avantages de la création d'éléments en mémoire comme oposed à les ajouter au DOM pendant que vous avancez. Mais nous sommes d'accord sur cette partie. Je dirais, comme vous le faites, qu'il ne devrait pas importer si vous ajoutez les éléments à un documentFragment ou à tout autre nœud en mémoire. Une raison pour laquelle je préférerais encore le documentFragment est pour la readabillity, car il est clair que le fragment ne fait pas partie du DOM. Mais jusqu'à ce que je l'ai goûté, c'est plutôt une question de goût :-) – Guidhouse

Voici une illustration simple pour convertir la page html (statique) en page html basée sur javascript (dynamique). Disons, vous avez html-page comme "index.html" (en appelant ici index_static.html).

index_static.html

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 
     <h1> Hello !!! </h1> 
    </body> 
</html>

Vous pouvez ouvrir ce fichier dans le navigateur, pour voir la sortie désirée.

Maintenant, créons un javascript équivalent à ceci. Utilisez online-tool pour générer la source javascript (en y collant la source du fichier html ci-dessus).Par conséquent, il en résulte que:

dynamic.js

document.write("<!DOCTYPE HTML>"); 
document.write("<html>"); 
document.write(" <head>"); 
document.write("  <title>Test<\/title>"); 
document.write(" <\/head>"); 
document.write(" <body>"); 
document.write("  <h1> Hello !!! <\/h1>"); 
document.write(" <\/body>"); 
document.write("<\/html>");

Et maintenant, votre version dynamique du static_index.html sera comme ci-dessous:

index_dynamic.html

<script language="JavaScript" src="dynamic.js"></script>

Ouvrez le index_dynamic. html sur le navigateur pour valider la page web (dynamique mais, down-the-line).

more info

Source

2017-03-30 12:33:15 parasrish

Création dynamique d'éléments HTML en utilisant Javascript?

Répondre

Questions connexes