Criar botão dinamicamente no javascript

17/05/2016

0

Front-end

Boa noite...
Como faço para criar botão dinamicamente no javascript ? Eu até fiz usando assim:
var newBt = document.createElement("BUTTON");

Mas eu quero que apareça o texto dentro do botão.

Fico no aguardo

Obrigado

Att

Rogério
Rogerio Santos

Rogerio Santos

Responder

Posts

18/05/2016

Jothaz 

<script>
	options.innerHTML = options.innerHTML + "<button type="button">Clique</button>";
</script>

<script>
	var button = document.createElement('button');
	button.setAttribute('type','button')
	button.appendChild(document.createTextNode('Seu button'));
	document.body.appendChild(button);
</script>

<script>
	var lb_inp = document.createElement('button');
	lb_inp.innerHTML = 'Login';
	lb_inp.setAttribute('type', 'submit');
	lb_inp.name = 'Login';
</script>
Responder
Gostei + 0

18/05/2016

Rogerio Santos

Bom dia..

O código que vc postou testei mas não funcionou...
Mas consegui fazer de uma outra forma..
Mas um outro problema que tem é o seguinte:

Além de criar o botão dinamicamente, quero o evento onclick seja disparado neste botão que foi criado dinamicamente...
Agora é isso que preciso fazer.........E como fazer ???

Att

Rogério
Responder
Gostei + 0

18/05/2016

Jothaz

Os código funcionam como pode ser visto em:

innerHTML

createElement

Mas é necessário que se tenha pelo menos conhecimento minimo de HTML e JavaScritp, do contrário complica.

Mas consegui fazer de uma outra forma.


Como você não postou o código de como consegui fazer, sinceramente não tenho como ajudá-lo, pois teria de adivinhar como foi feito.

Se possível,por favor, post seu código.

E se possível seja mais claro no que você pretende fazer, pois não conseguir entender.
Responder
Gostei + 0

18/05/2016

Rogerio Santos

Boa noite....

Objetivo do programa é: A medida que eu pressionar o botão ADICIONAR ITEM, ele vai acrescentando linha em uma TABLE.
Quando é feito a inserção de linhas, do lado tem um botão de EXCLUIR ITEM que vai adicionando automaticamente( Esse botão eu fiz).
O que acontece é que se eu pressiono o botão EXCLUIR ITEM(que é feito dinamicamente) não chama a função removeItem.
Resumindo: O que eu preciso é o botão EXCLUIR ITEM(que é feito dinamicamente) consiga chamar a função remoItem

Desde já agradeço sua atenção


Segue o código abaixo....




<script>  	  
      function addItem(){                
      	var newTR     = document.createElement("TR");
        var newINPUT  = document.createElement("INPUT"); 
        var newTD     = document.createElement("TD");
        var newBt     = document.createElement("BUTTON");
        newBt.innerHTML = 'Excluir Item';

       
        var newINPUT1 = document.createElement("INPUT"); 
        
      	newTR.appendChild(newINPUT);         
        newTR.appendChild(newTD);       
        newTR.appendChild(newINPUT1);       
      
        newTR.appendChild(newBt);
        
        var element = document.getElementById("item");      	
        element.appendChild(newTR);      
      }

      function removeItem(r){
               var i = r.parentNode.parentNode.rowIndex;
               alert(i);
               document.getElementById("idTable").deleteRow(i);     
      }
     
      </script>
    body>
     <div id="item">    
	 <table">
          <tr>
            <td>Nome:</td>   
            <td>Endereço:</td>     
           
          </tr>       
        </table>  
        <table id="idTable">
          <tr> 
           <div id="texto">          
            <td><input type="text" name="nome" id="idcampo"></td> 
            <td><input type="text" name="endereco" id="idEndereco"></td>           
           </td>
            <td><input type="button" onclick="removeItem(this)" value="Excluir Item"></td>
           </div>          
          </tr>         
        </table> 
              <input type="button" id="btn" onclick="addItem()"   value="Adicionar Item">
	 </div> 
     
  </body>
Responder
Gostei + 0

15/12/2022

Gabriel Sousa

Boa noite....

Objetivo do programa é: A medida que eu pressionar o botão ADICIONAR ITEM, ele vai acrescentando linha em uma TABLE.
Quando é feito a inserção de linhas, do lado tem um botão de EXCLUIR ITEM que vai adicionando automaticamente( Esse botão eu fiz).
O que acontece é que se eu pressiono o botão EXCLUIR ITEM(que é feito dinamicamente) não chama a função removeItem.
Resumindo: O que eu preciso é o botão EXCLUIR ITEM(que é feito dinamicamente) consiga chamar a função remoItem

Desde já agradeço sua atenção


Segue o código abaixo....




<script>  	  
      function addItem(){                
      	var newTR     = document.createElement("TR");
        var newINPUT  = document.createElement("INPUT"); 
        var newTD     = document.createElement("TD");
        var newBt     = document.createElement("BUTTON");
        newBt.innerHTML = 'Excluir Item';

       
        var newINPUT1 = document.createElement("INPUT"); 
        
      	newTR.appendChild(newINPUT);         
        newTR.appendChild(newTD);       
        newTR.appendChild(newINPUT1);       
      
        newTR.appendChild(newBt);
        
        var element = document.getElementById("item");      	
        element.appendChild(newTR);      
      }

      function removeItem(r){
               var i = r.parentNode.parentNode.rowIndex;
               alert(i);
               document.getElementById("idTable").deleteRow(i);     
      }
     
      </script>
    body>
     <div id="item">    
	 <table">
          <tr>
            <td>Nome:</td>   
            <td>Endereço:</td>     
           
          </tr>       
        </table>  
        <table id="idTable">
          <tr> 
           <div id="texto">          
            <td><input type="text" name="nome" id="idcampo"></td> 
            <td><input type="text" name="endereco" id="idEndereco"></td>           
           </td>
            <td><input type="button" onclick="removeItem(this)" value="Excluir Item"></td>
           </div>          
          </tr>         
        </table> 
              <input type="button" id="btn" onclick="addItem()"   value="Adicionar Item">
	 </div> 
     
  </body>
Então, o erro aqui era o fato da sua function "removeItem" estava funcionando somente no objeto inicial da página, no qual tinha a id utilizada como request no código. A forma que eu utilizei para resolver foi criar um eventListener dentro da function de criação de item, que utiliza da variável "newBt" para que, quando observar um click no botão de remover item, funcione para apagar a variável "newTR" que corresponda aquele botão em questão. Segue o código: 
 

newBt.addEventListener("click", function(){
            newTR.remove();
        });
Responder
Gostei + 0

09/01/2023

Delmiro

Olá, existem vários modos de fazer isso, um deles que é o mais simples possível é o seguinte:
<script>
   let MeuBotao = "<button>Aperte Aqui</button>";   //aqui voce cria um botão dentro de uma string

  document.getElementById("/*aqui voce coloca o id do elemento html em que voce quer que o botao seja adicionado*/").innerHTML += MeuBotao; // aqui voce adiciona seu botão ao seu html

</script>
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar