Exibir código-fonte para Javascript: elementos dinâmicos

Afluentes: [[Desenvolvimento Front-end I]], [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]

= Elementos Dinâmicos =

É possível, com o uso de Javascript, adicionar e remover qualquer tipo de elemento HTML de uma página.

= Adicionando Elementos =

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
<head><title>Elementos Dinâmicos</title></head>
<body id="corpo">
    <h1>Adicionar Elementos</h1>
    <p>
        Digite o texto:
        <input type="text" id="texto">
    </p>
    <p>
        <button onclick="adicionar()">Adicionar</button>
    </p>
    <script>
        function adicionar() {
            var texto = document.getElementById("texto");
            var para = document.createElement("p");
            para.innerHTML = texto.value;
            var corpo = document.getElementById("corpo");
            corpo.appendChild(para);
            texto.value = "";
        }
    </script>
</body>
</html>
</syntaxhighlight>

= Removendo Elementos =

O exemplo a seguir remove um elemento da página html.

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
<head><title>Elementos Dinâmicos</title></head>
<body id="corpo">
    <h1>Remover Elemento</h1>
    <button onclick="remover()">Remover</button></p>
    <p id="texto">Texto que será removido...</p>
    <script>
        function remover() {
            var pai = document.getElementById("corpo");
            var filho = document.getElementById("texto");
            pai.removeChild(filho);
        }
    </script>
</body>
</html>
</syntaxhighlight>

= Adicionando e Removendo Dinamicamente =

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
    <head>
        <title>Elementos Dinâmicos</title>
    </head>
    <body id="corpo">
        <h1>Adicionar Elementos</h1>
        <p>
            Digite o texto:
            <input type="text" id="texto" />
        </p>
        <p>
            <button onclick="adicionar()">Adicionar</button>
        </p>
        <script>
            var id = 0;
            function adicionar() {
                var texto = document.getElementById("texto");
                var para = document.createElement("p");
                para.id = "para_" + id++;
                para.innerHTML = texto.value + " " + para.id;
                var button = document.createElement("button");
                button.setAttribute("onclick", "remover('" + para.id + "');");
                button.innerHTML = "X";
                para.appendChild(button);
                var corpo = document.getElementById("corpo");
                corpo.appendChild(para);
                texto.value = "";
            }

            function remover(id) {
                var pai = document.getElementById("corpo");
                var filho = document.getElementById(id);
                pai.removeChild(filho);
            }
        </script>
    </body>
</html>
</syntaxhighlight>

= Atividades =

== Atividade 1 ==

* Crie um documento HTML
* Adicione um título H1 na página com texto vazio
* Adicione um campo texto de entrada com ''label'' '''Nome'''
* Altere dinâmicamente o título H1 sempre que o usuário digitar qualquer coisa no campo texto

== Atividade 2 ==

* Crie um código HTML
* Crie um campo texto e um botão ENVIAR
* crie uma lista (bullets) vazia
* Ao clicar no botão ENVIAR, adiciona um ítem na lista com o conteúdo do campo texto e apague o conteúdo do campo texto

== Atividade 3 ==

* Crie um código HTML
* Crie três campos de entrada (nome, telefone, e-mail)
* Crie dois botões (adicionar, limpar)
* Crie uma tabela com três colunas e com os títulos Nome, Telefone e E-mai
* Ao entrar com informações nos campos texto e clicar no botão adicionar, é criada uma linha na tabela e são adicionados os dados que estavam nos campos de texto e os campos de texto são limpos
* Ao clicar no botão limpar, exclui todas as linhas da tabela, menos a linha de título