create div at runtime

Asked

Viewed 463 times

0

I have the following html:

 <div>
    <h3>Use font awesome icons</h3>
    <div id="lobipanel-font-awesome" class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                Panel title
            </div>
        </div>
        <div class="panel-body">
            Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
        </div>
    </div>
</div>

this code generates a panel, on the page has a button "open panel", would you like the panel to be created (open) after clicking the button, how can I do this? can generate html at runtime?

jquery html html5

  • I’m not sure what style you want to achieve but have you thought about using the <Details> element? You can give the same effect as you want besides giving semantics to your html. link: http://html5doctor.com/the-details-and-summary-elements/

1 answer

1

- Javascript - Css - Html

$( "#Clique" ).click(function() {
  $("#escondido").css("display","block");
});
#escondido{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Botão -->
<a href="http://google.com" target="_blank" id="Clique">Clique aqui</a>
<!-- Div oculta -->
<div id="escondido">
    <h3>Use font awesome icons</h3>
    <div id="lobipanel-font-awesome" class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                Panel title
            </div>
        </div>
        <div class="panel-body">
            Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
        </div>
    </div>
</div>

or you can add the code with javascript:

$( "#Clique, #botao" ).click(function() {
  var html = '';
  html += '<div id="escondido">';
    html += '<h3>Use font awesome icons</h3>';
      html += '<div id="lobipanel-font-awesome" class="panel panel-info">';
        html += '<div class="panel-heading">';
          html += '<div class="panel-title">';
            html += 'Panel title';
          html += '</div>';
        html += '</div>';
        html += '<div class="panel-body">Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.';
      html += '</div>';
    html += '</div>';
  html += '</div>';

  $("#painel").html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Link -->
<a href="http://google.com" target="_blank" id="Clique">Clique aqui</a>
<!-- Ou button -->
<button id="botao">Botao</button>

<!-- Div onde ficara o conteudo -->
<div id="painel">
</div>

Browser other questions tagged jquery html html5

You are not signed in. Login or sign up in order to post.