create div at runtime

Question

create div at runtime

Navigation

#1 by (1 votes)

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, the page has a "open panel" button, I would like the panel to be created (open) after clicking the button, how can I do this? how to generate html at runtime?

html jquery html5

asked by anonymous 13.05.2017 / 01:01

1 answer

Get JSON information and insert into html with loop using getJson Give a select to return the unique values

score 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--><ahref="http://google.com.br" 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--><ahref="http://google.com.br" target="_blank" id="Clique">Clique aqui</a>
<!-- Ou button -->
<button id="botao">Botao</button>

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