{"id":73,"date":"2023-08-11T16:55:28","date_gmt":"2023-08-11T19:55:28","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=73"},"modified":"2024-01-27T21:04:27","modified_gmt":"2024-01-28T00:04:27","slug":"como-manipular-um-componente-html-com-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2023\/08\/11\/como-manipular-um-componente-html-com-javascript\/","title":{"rendered":"Como manipular componente html com Javascript."},"content":{"rendered":"

Neste tutorial mostro como adicionar ou remover um componente html com Javascript.<\/h2>\n
\n

 <\/p>\n

\"Como
Como manipular componente html com Javascript.<\/figcaption><\/figure>\n

 <\/p>\n

Introdu\u00e7\u00e3o\u00a0<\/span><\/h2>\n

 <\/p>\n

Este tutorial tem como objetivo mostrar como manipular componente Html<\/strong> com Javascript<\/strong><\/a>, ser\u00e1 um breve tutorial utilizando os conceitos de manipula\u00e7\u00e3o do dom<\/strong> do Javascript<\/strong><\/a>.<\/span><\/p>\n

O intuito \u00e9 demonstrar\u00a0 de uma forma r\u00e1pida, pratica e f\u00e1cil de como podemos manipular os componentes do Html<\/strong> utilizando apenas o Javascript<\/a>.\u00a0<\/strong><\/span><\/p>\n

Pois aprender como manipular os componentes do Html \u00e9 essencial para todo programador Frontend, que deseja construir aplica\u00e7\u00f5es din\u00e2micas.\u00a0 \u00a0<\/span><\/p>\n

 <\/p>\n

Como adicionar um componente Html utilizando Javascript<\/a><\/h2>\n

 <\/p>\n

Para execu\u00e7\u00e3o deste tutorial vou utilizar a fun\u00e7\u00e3o createElement()<\/b><\/code> do javascript, para criar o elemento que ser\u00e1 inserido na p\u00e1gina e irei utilizar tamb\u00e9m a fun\u00e7\u00e3o appendChild()<\/b><\/code>, que ser\u00e1 respons\u00e1vel por adicionar o elemento criado ao corpo de outro elemento.<\/span><\/p>\n

Logo abaixo mostro o c\u00f3digo que criei com a fun\u00e7\u00e3o respons\u00e1vel por\u00a0 adicionar um elemento a uma div<\/strong>:<\/span><\/p>\n

 <\/p>\n

    function adicionarComponente() {\t\t\t\t\t\t\t\t\t\t\r\n\r\n        \/\/ Obt\u00e9m o elemento pai \r\n        const elementoPai = document.getElementById('elementoPai');\r\n\r\n        \/\/ Criar o elemento\r\n        const elementoFilho = document.createElement('button');\r\n\r\n        \/\/Adiciona os atributos do elemento\r\n        elementoFilho.id \t\t\t= \"elementoFilho\";\r\n        elementoFilho.innerHTML \t= \"bot\u00e3o teste\";\r\n        elementoFilho.type \t\t\t= \"button\";\r\n        elementoFilho.class \t\t= \"btn-impressao\";\r\n\r\n        \/\/ Insere (anexar) o elemento filho (botao) ao elemento pai (div)\r\n        elementoPai.appendChild(elementoFilho);           \r\n\r\n    };\r\n<\/code><\/pre>\n
 <\/p>\n
Vamos para explica\u00e7\u00e3o da fun\u00e7\u00e3o que acabei de criar:<\/h3>\n
    \n
  1. No inicio da fun\u00e7\u00e3o obtemos o id do elemento pai utilizando para isso\u00a0 a fun\u00e7\u00e3o getElementById(elementoPai)<\/b><\/code>;<\/span><\/li>\n
  2. Logo depois crio o elemento filho que ser\u00e1 adicionado ao elemento pai com a fun\u00e7\u00e3o createElement('button'),<\/b><\/code> neste caso ser\u00e1 criado no elemento pai um bot\u00e3o;<\/span><\/li>\n
  3. Em seguida atribuo os atributos do elemento filho (button) criado,\u00a0 no elemento filho defino os atributos\u00a0 tipo(type), a class do css(class) , o valor(innerHTML) e o id(id)<\/b><\/code>;<\/span><\/li>\n
  4. \u00a0E por \u00faltimo insiro o elemento criado(elementoFilho) ao elemento pai com a fun\u00e7\u00e3oappendChild(elementoFilho);<\/code><\/span><\/li>\n<\/ol>\n
     <\/p>\n
    Pronto com isso j\u00e1 podemos adicionar a fun\u00e7\u00e3o que remover\u00e1 um componente html utilizando Javascript<\/a><\/h3>\n
     <\/p>\n
    Para conseguirmos remover um elemento html utilizando o Javascript vamos utilizar a fun\u00e7\u00e3o remove()<\/b><\/code> que \u00e9 disponibilizada pelo Javascript.<\/span><\/p>\n
    Logo abaixo mostro a fun\u00e7\u00e3o que criei para remover um elemento html:<\/span><\/p>\n
     <\/p>\n
    function removerComponente() {\t\r\n                \r\n  document.getElementById(\"elementoFilho\").remove();\r\n                \r\n};\r\n<\/code><\/span><\/pre>\n
     <\/p>\n
    Vamos para explica\u00e7\u00e3o da fun\u00e7\u00e3o acima:<\/h3>\n
    Ao implementar a fun\u00e7\u00e3o acima foi utilizei a fun\u00e7\u00e3o getElementById()<\/code>,\u00a0 que ser\u00e1 respons\u00e1vel por obter o componente a ser removido passando como parametro a informa\u00e7\u00e3o do id deste elemento<\/span><\/p>\n
    E junto com a fun\u00e7\u00e3o getElementById<\/code> utilizo a fun\u00e7\u00e3o remove()<\/code>,\u00a0 que ser\u00e1 respons\u00e1vel por remover o elemento Html da tela.<\/span><\/p>\n
     <\/p>\n
    Conclus\u00e3o<\/h2>\n
    Este foi um breve exemplo de como podemos adicionar ou remover um elemento de uma p\u00e1gina em Html, logo abaixo mostro o c\u00f3digo completo que foi utilizado neste tutorial.<\/span><\/p>\n
     <\/p>\n
    <html>\r\n<head>   \r\n    <title>Document<\/title>\r\n\r\n    <script type=\"text\/javascript\" >\t\t\r\n\t\t\r\n        function removerComponente() {\t                \r\n            document.getElementById(\"elementoFilho\").remove();            \r\n        };\r\n\r\n        function adicionarComponente() {\t\t\t\t\t\t\t\t\t\t\r\n    \r\n            \/\/ Obt\u00e9m o elemento pai \r\n            const elementoPai = document.getElementById('elementoPai');\r\n\r\n            \/\/ Criar o elemento\r\n            const elementoFilho = document.createElement('button');\r\n\r\n            \/\/Adiciona os atributos do elemento\r\n            elementoFilho.id \t\t\t= \"elementoFilho\";\r\n            elementoFilho.innerHTML \t= \"bot\u00e3o teste\";\r\n            elementoFilho.type \t\t\t= \"button\";\r\n            elementoFilho.class \t\t= \"btn-impressao\";\r\n\r\n            \/\/ Insere (anexar) o elemento filho (botao) ao elemento pai (div)\r\n            elementoPai.appendChild(elementoFilho);   \r\n        };    \r\n\r\n<\/script>\r\n\r\n<\/head>\r\n    <body>\r\n\r\n        <button type=\"button\"\r\n                  onClick=\"adicionarComponente();\" >\r\n            Adicionar Componente \r\n        <\/button>\r\n\r\n        <button type=\"button\"\r\n                  onClick=\"removerComponente();\" >\r\n          Remover Componente\r\n        <\/button>\r\n\r\n        <div id=\"elementoPai\" >\r\n\t\t\t<button  type=\"button\" id=\"elementoFilho\" >bot\u00e3o teste<\/button>\t\t\t\r\n\t\t<\/div>\r\n        \r\n    <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
     <\/p>\n
    Refer\u00eancias:<\/h2>\n