<html>
<head>
<link href="css.css" rel="Stylesheet" type="text/css"/>
</head>
<body>
<script>
function apresente()
{
var newEl = document.createElement('li');
var newText = document.createTextNode('breno');
newEl.appendChild(newText);
var position = document.getElementsByName('ol')[0];
position.appendChild(newEl);
}
</script>
<form>
<input type="submit" value = "Enviar" onclick="apresente()"/>
</form>
<ol>
<li></li>
</ol>
</body>
</html>
3 Respostas
Existem dois pontos aqui, primeiro o botão é do tipo submit
que vai executar o envio do formulário, que por não ter um endereço definido para action, causará apenas o refresh da página e "nem executará" o seu JavaScript. Depois o método correto seria document.getElementsByTagName()
.
Você pode alterar o tipo do input para button
ou adicionar um return no seu método caso vá implementar alguma outra regra em que ele deva submeter o formulário em alguma condição.
function apresente()
{
var newEl = document.createElement('li');
var newText = document.createTextNode('breno');
newEl.appendChild(newText);
var position = document.getElementsByTagName('ol')[0];
position.appendChild(newEl);
//não vai submeter o formulário até que seja true;
return false;
}
<html>
<body>
<form>
<input type="submit" value="Enviar" onclick="return apresente()" />
</form>
<ol>
</ol>
</body>
</html>
Existe algum elemento com o nome ol
em seu DOM?
Se você quer fazer append em um elemento com a tag ol
deveria usar getElementsByTagName
, não getElementsByName
. Fora queries possivelmente retornando null, não existe nada de errado com o código.
Onde tem:
var position = document.getElementsByName('ol')[0];
Deveria ser:
var position = document.getElementsByTagName('ol')[0];
Teste aqui
<ol name="ol">
? ou então mudar o javascript:var position = document.getElementsByTagName('ol')[0];
?