Forums » jQuery

ALTERAR CONTEÚDO DIV COM JAVASCRIPT (JQUERY)

    • 466 posts
    14 de julho de 2014 23:37:04 ART

    ALTERAR CONTEÚDO DIV COM JAVASCRIPT (JQUERY)

    Este é um pequeno tutorial cobre uma pequena operação básica de jQuery. Como alterar o conteúdo de um elemento HTML (p.ex. DIV) com javascript jQuery.

     

    Criar um novo documento HTML com o código:

     
    <html>
    <head>
    <title>Página teste jQuery </title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    // javascript código (jQuery)
    </script>
    </head>
    <body>
    <--- HTML aqui -->
    </body>
    </html>

    Neste momento a página que criamos apenas carrega a biblioteca jQuery.

    Vamos então adicionar algum código HTML para servir como exemplo:

     
    <a id="linkAltera">Alterar conteúdo</a>
    <br />
    <div id="caixaTexto">Este conteúdo será alterado para outra coisa qualquer</div>

    Código jQuery:
    Agora vamos adicionar código para que o conteúdo da division 'caixaTexto' seja alterado assim que clicarmos no link 'linkAltera'

     
    $(document).ready(function() {
    $("#linkAltera").click(function() {
    $("#caixaTexto").html("Este é o novo texto heehe!");
    });
    });

    Assim que a págiuna for carregada no browser, uma função é declarada para o link com o ID 'linkAltera', que fará que assim que for clicado, o conteúdo da DIV com o ID 'caixaTexto' será alterado para o especificado.

    Código final completo:

     
    <html>
    <head>
    <title>Página teste jQuery </title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#linkAltera").click(function() {
    $("#caixaTexto").html("Este é o novo texto heehe!");
    });
    });
    </script>
    </head>
    <body>
    <a id="linkAltera">Alterar conteúdo</a>
    <br />
    <div id="caixaTexto">Este conteúdo será alterado para outra coisa qualquer</div>
    </body>
    </html>

    Prontinho, simples função para alterar conteúdo HTML via javascrip jQuery