Comment écrire dans la div à l'aide de javascript

Je veux faire par exemple le contenu de la variable en javascript qui va avoir des balises html à l'intérieur de certaines valeurs.
Comment puis-je mettre ça dans la div lorsque le bouton est pressé.

Par exemple :

C'est un contenu que je veux utiliser: 

var contentString = '<div id="info">'+
'<h2><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Info:</b></h2>'+
'<div id="bodyContent">'+ 
'<div style=width:220px;display:inline-block;>'+
'<p>&nbsp; Name: '+ this.name + '</p>' +
'<p>&nbsp; Last name: '+ this.last+ '</p>' +
'<p>&nbsp; 
'</div>'+
'</div>'+
'</div>'+
'</form>';

Et je veux le mettre dans : <div id=something"></div>
En javascript, je peux avoir quelque chose comme:

$("#button").on('click', function() {
//What to put in here?
});
  • Veuillez prendre note que toutes les réponses à ce jour suggèrent l'appel de la .html propriété qui est comme faire .innerHTML . Je vous suggère de ne pas écrire en HTML directement, mais plutôt d'utiliser appendChild et createElement à la place.
InformationsquelleAutor user123_456 | 2012-07-04
  1. 8

    Comment puis-je mettre ça dans la div lorsque le bouton est pressé.

    Comme ceci:

    $("#button").on('click', function() {
  $('#something').html(contentString);
});

    Plus d'infos sur html();

    InformationsquelleAutor Blaster
  2. 2

    Il va comme ceci:

    $("#button").on('click', function() {
   $("#something").html(contentString);
});
    InformationsquelleAutor Alfabravo
  3. 2

    Si je ne suis pas de malentendu, alors ce sera le travail:

    $("#button").on('click', function() {
  $('#something').html(contentString);
});

    Ce n'est, bien sûr, supposons que vous avez un élément avec un id de button (bien que je suppose que vous faites, sinon vous n'auriez pas mis que jQuery).

    JS Fiddle démo.

    Références:

    InformationsquelleAutor David Thomas
  4. 1

    Vous devriez corriger votre balisage. Vous le déséquilibre de leurs éléments, et vous ne pouvez pas avoir de nouvelles lignes dans la chaîne sans prendre la fuite. Essayez plutôt ceci:

    var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+ 
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';

    Remarque que j'ai sauté le &nbsp;, et de les remplacer avec des attributs de style. Vous devriez vraiment mettre ces styles dans une feuille de style, bien.

    $("#button").on('click', function() {
  $('#something').html(contentString);
});

    Garder à l'esprit que les variables dans contentString ne seront pas évaluées lors de l'événement de clic sur le bouton des feux, ce qui signifie que cette.nom et cet.dernier ne changera pas. Avez-vous besoin de mettre à jour ces valeurs, cliquez sur ainsi?

    InformationsquelleAutor Jørgen