Dúvida com HTML

Boa tarde pessoal,
Bem, estou enfrentando um problema, tenho que criar apresentação de slides em HTML 5, e até já encontrei um template muito legal da Google.
:stuck_out_tongue:
Ótimo!

O problema: :?:

Estou querendo criar um botão que, ao ser acionado irá criar uma no código, por exemplo:

Para criar um novo slide basta apenas eu colocar , está criado um novo slide, mas não posso pedir que o usuário aprenda HTML para poder usar minha ferramenta.

Então queria criar uma interface para que facilita-se seu uso, mas travei em como faze-lo, quem puder me ajudar me informando bibliotecas ou artigos que possam me ajudar, eu agradeço mesmo!

Forte abraço, vou continuar tentando por aqui! :slight_smile:

Veja esse artigo: http://programadorprofissional.blogspot.com.br/2012/10/inserindo-conteudo-dinamico-com-jquery.html
Além do código o artigo mostra o exemplo funcionando.

O código é esse:

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  
   </head>
   <body>
      <input type="button" value="Adicionar Paragrafo" onclick="$('#conteudo').append('<p>Paragrafo Adicionado</p>');" />
      <div id="conteudo"></div>
   </body>
</html>

É só adaptar para inserir ao inves de

att

Valeu cara, muito obrigado!

Meu caro amigo, muito obrigado pela dica, só ao testar não fez bem oque eu queria, porque ele lança o código no plano de fundo e não está criando o slide novo como eu queria, vou te passar o código para você poder ver com seus próprios olhos.

[code]

<!-- Google HTML5 slide template
  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/html5slides/
-->

<!-- src='http://html5slides.googlecode.com/svn/trunk/slides.js'> -->
<head>

    <title>Nova apresentação</title>

    <meta charset='utf-8'>
    <script
        src='http://html5slides.googlecode.com/svn/trunk/slides.js'>
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  

</head>

<style>
    /* Your individual styles here, or just use inline styles if that?s
       what you want. 
    
    "<article><h3>Cabeçalho do Slide 2</h3><p></p><p>There is more text just underneath with a <code>code sample: 5px</code>.</p></article>"*/


</style>
<!-- Your slides (<article>s) go here. Delete or comment out the
     slides below. --> 
<article>
    <h1>
        
        <br>
       Titulo principal 1
    </h1>
    <p>
        <input type="button" value="Adicionar Paragrafo" onclick="$('#conteudo').append('<article><h3>Cabeçalho do Slide 2</h3><p></p><p>There is more text just underneath with a <code>code sample: 5px</code>.</p></article>');" />  
        
        <br>
        Outubro 30, 2012.
    </p>
</article>

<div id="conteudo"></div> 

<article>
    <h1>
        
        <br>
       Titulo principal 2
    </h1>
    <p>
        <input><input type="submit" value="Enviar" name="enviar" />
        <br>
        Outubro 30, 2012.
    </p>
</article>
<article>
    <h3>
        Cabeçalho do Slide 2
    </h3>
    <p>
   
    </p>
    <p>
        There is more text just underneath with a <code>code sample: 5px</code>.
    </p>
</article>

<article class='smaller'>
    <h3>
        Simple slide with header and text (small font)
    </h3>
    <p>
        This is a slide with just text. This is a slide with just text.
        This is a slide with just text. This is a slide with just text.
        This is a slide with just text. This is a slide with just text.
    </p>
    <p>
        There is more text just underneath with a <code>code sample: 5px</code>.
    </p>
</article>

<article>
    <h3>
        Slide with bullet points and a longer title, just because we
        can make it longer
    </h3>
    <ul>
        <li>
            Use this template to create your presentation
        </li>
        <li>
            Use the provided color palette, box and arrow graphics, and
            chart styles
        </li>
        <li>
            Instructions are provided to assist you in using this
            presentation template effectively
        </li>
        <li>
            At all times strive to maintain Google's corporate look and feel
        </li>
    </ul>
</article>

<article>
    <h3>
        Slide with bullet points that builds
    </h3>
    <ul class="build">
        <li>
            This is an example of a list
        </li>
        <li>
            The list items fade in
        </li>
        <li>
            Last one!
        </li>
    </ul>

    <div class="build">
        <p>Any element with child nodes can build.</p>
        <p>It doesn't have to be a list.</p>
    </div>
</article>

<article class='smaller'>
    <h3>
        Slide with bullet points (small font)
    </h3>
    <ul>
        <li>
            Use this template to create your presentation
        <li>
            Use the provided color palette, box and arrow graphics, and
            chart styles
        <li>
            Instructions are provided to assist you in using this
            presentation template effectively
        <li>
            At all times strive to maintain Google's corporate look and feel
    </ul>
</article>

<article>
    <h3>
        Slide with a table
    </h3>

    <table>
        <tr>
            <th>
                Name
            <th>
                Occupation
        <tr>
            <td>
                Luke Mahé
            <td>
                V.P. of Keepin? It Real
        <tr>
            <td>
                Marcin Wichary
            <td>
                The Michael Bay of Doodles
    </table>
</article>

<article class='smaller'>
    <h3>
        Slide with a table (smaller text)
    </h3>

    <table>
        <tr>
            <th>
                Name
            <th>
                Occupation
        <tr>
            <td>
                Luke Mahé
            <td>
                V.P. of Keepin? It Real
        <tr>
            <td>
                Marcin Wichary
            <td>
                The Michael Bay of Doodles
    </table>
</article>

<article>
    <h3>
        Styles
    </h3>
    <ul>
        <li>
            <span class='red'>class="red"</span>
        <li>
            <span class='blue'>class="blue"</span>
        <li>
            <span class='green'>class="green"</span>
        <li>
            <span class='yellow'>class="yellow"</span>
        <li>
            <span class='black'>class="black"</span>
        <li>
            <span class='white'>class="white"</span>
        <li>
            <b>bold</b> and <i>italic</i>
    </ul>
</article>

<article>
    <h2>
        Segue slide
    </h2>
</article>

<article>
    <h3>
        Slide with an image
    </h3>
    <p>
        <img style='height: 500px' src='images/example-graph.png'>
    </p>
    <div class='source'>
        Source: Sergey Brin
    </div>
</article>

<article>
    <h3>
        Slide with an image (centered)
    </h3>
    <p>
        <img class='centered' style='height: 500px' src='images/example-graph.png'>
    </p>
    <div class='source'>
        Source: Larry Page
    </div>
</article>

<article class='fill'>
    <h3>
        Image filling the slide (with optional header)
    </h3>
    <p>
        <img src='images/example-cat.jpg'>
    </p>
    <div class='source white'>
        Source: Eric Schmidt
    </div>
</article>

<article>
    <h3>
        This slide has some code
    </h3>
    <section>
        <pre>

<script type=‘text/javascript’>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ’ + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: ‘umber’ }
</style>


<article class='smaller'>
    <h3>
        This slide has some code (small font)
    </h3>
    <section>
        <pre>

<script type=‘text/javascript’>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ’ + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: ‘umber’ }
</style>


<article>
    <q>
        The best way to predict the future is to invent it.
    </q>
    <div class='author'>
        Alan Kay
    </div>
</article>

<article class='smaller'>
    <q>
        A distributed system is one in which the failure of a computer
        you didn?t even know existed can render your own computer unusable.
    </q>
    <div class='author'>
        Leslie Lamport
    </div>
</article>

<article class='nobackground'>
    <h3>
        A slide with an embed + title
    </h3>

    <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
</article>

<article class='nobackground'>
    <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
</article>

<article class='fill'>
    <h3>
        Full-slide embed with (optional) slide title on top
    </h3>
    <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
</article>

<article>
    <h3>
        Thank you!
    </h3>

    <ul>
        <li>
            <a href='http://www.google.com'>google.com</a>
    </ul>
</article>
[/code]

A parte do codigó qe você me passou está na linha 52.

Forte abraços e muito obrigado