Criar botão dinamicamente no javascript
17/05/2016
0
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
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>
18/05/2016
Rogerio Santos
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
18/05/2016
Jothaz
innerHTML
createElement
Mas é necessário que se tenha pelo menos conhecimento minimo de HTML e JavaScritp, do contrário complica.
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.
18/05/2016
Rogerio Santos
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>
15/12/2022
Gabriel Sousa
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>
newBt.addEventListener("click", function(){
newTR.remove();
}); 09/01/2023
Delmiro
<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>
Clique aqui para fazer login e interagir na Comunidade :)
