Javascript: Utiliser createElement pour générer un bouton Div on Cliquez sur

J'ai une liste et chaque élément a un bouton. Lorsque je clique sur le bouton, je veux qu'un div apparaisse dans l'élément de la liste. Le contenu de cette div apparaissant sera le même pour chaque élément de la liste. Comment puis-je générer dynamiquement ces divs en utilisant Javascript?Javascript: Utiliser createElement pour générer un bouton Div on Cliquez sur

J'ai analysé la fonction createElement() mais je n'ai pas encore compris son utilisation ou trouvé un bon exemple.

Source

2010-08-25 Charlie

Vous pouvez utiliser document.createElement(), mais ce n'est pas vraiment ce que vous voulez faire (principalement en raison de la performance).

Ce que vous devez vraiment faire est d'avoir votre DIV dans le cadre de votre balisage, mais le rendre invisible avec CSS. Et puis copiez-le simplement dans LI innerHTML.

Quelque chose comme ceci:

CSS: 
.hidden-element 
{ 
    display:none; 
} 

HTML: 
<ul> 
    <li id="firstListItem"></li> 
</ul> 

<div id="myDiv" class="hidden-element"> 
    <div>My Div Content</div> 
</div> 

JavaScript: 

function showDivContent() 
{ 
var listItem = document.getElementById('firstListItem'); 
var myContent = document.getElementById('myDiv').innerHTML; 
listItem.innerHTML = myContent; 
}

Source

2010-08-25 02:19:21 dimarzionist

J'aime cette solution. Quelques questions cependant. Puis-je faire quelque chose comme: 'listItem.innerHTML + = myCONTENT; // Append' Ou est-il un append COMAND je devrais utiliser? Deuxièmement, que se passe-t-il si ce div imbriqué dans l'élément caché a un gestionnaire onclick(). Puis-je modifier par programme les paramètres de fonction de ce gestionnaire onclick()? – Charlie

Oui, vous pouvez ajouter le contenu, innerHTML est la chaîne simple pour JS. Si vos paramètres pour l'événement onclick dépendent de DIV lui-même, alors il vaut mieux le passer en paramètre: onclick = "myFunction (this);" Vous pouvez également affecter dynamiquement le gestionnaire onclick lorsque vous ajoutez l'élément DIV lui-même: firstListItem.innerHTML = myContent; pour (var j = 0; j dimarzionist

Le problème de performances supposé avec 'document.createElement()' n'est préoccupant que si vous l'utilisez pour créer des charges d'éléments. Pour quelques éléments, cela ne posera jamais de problème et présente des avantages significatifs par rapport à innerHTML. –

var newDiv = document.createElement("div") // You now have an HTMLFragment 
    newDiv.id = "Something" 
document.body.appendChild(newDiv) // The body now has a new div appended to it.

Source

2010-08-25 02:19:31 John

'HTMLFragment'? Peut-être que vous confondez 'document.createElement()' avec 'document.createDocumentFragment()'. 'document.createElement()' crée un élément. –

Je pensais que tout ce qui n'était pas encore attaché au dom était considéré comme un "fragment", mon mauvais. – John

Javascript: Utiliser createElement pour générer un bouton Div on Cliquez sur

Répondre

Questions connexes