Ola pessoal, estou tentando resolver o problema desta aula de Jquery, utilizando JS puro. a situação é a seguinte, vou postar o código abaixo em Jquery, depois minha solução com JS:
SOLUÇÃO JQUERY:
function inserePlacar() {
var corpoTabela = $(".placar").find("tbody");
var usuario = "Douglas"
var numPalavras = $("#contador-palavras").text();
var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>" ;
var linha = "<tr>"+
"<td>"+ usuario + "</td>"+
"<td>"+ numPalavras + "</td>"+
"<td>"+ botaoRemover + "</td>"+
"</tr>";
corpoTabela.append(linha);
}
MINHA SOLUÇÃO COM JS PURO:
function inserePlacar () {
let nome = "Lucas xD";
let noPalavras = $("#contador-palavras").text();
//var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>";
var botao = criaBotaoRemove();
console.log(botao);
var tabela = document.querySelector("#tabela");
var dadosTr = criaTr(noPalavras, nome, botao);
tabela.appendChild(dadosTr);
}
function criaTd (dado) {
var td = document.createElement("td");
td.innerHTML= dado;
return td;
}
function criaTr (num,nome,botao) {
var tr = document.createElement("tr");
tr.appendChild(criaTd(nome));
tr.appendChild(criaTd(num));
tr.appendChild(criaTd(botao));
return tr;
}
function criaBotaoRemove() {
var a = document.createElement("a");
a.setAttribute('href', '#');
var i = document.createElement("i");
i.classList.add("small");
i.classList.add("material-icons");
i.textContent = "delete";
a.appendChild(i);
return a;
}
Porém ao executar o código, no lugar da TD onde deveria aparecer um elemento a do HTML, aparece o endereço do arquivo Html (file:///C:/Users/lucas/Documents/GITL/JQuery1Alura/public/principal.html#) desta forma.
E quando eu coloco no terminal do Google chrome,
criaBotaoRemove();
tenho como retorno o elemento HTML como esperado.
Mas quando dou appendChild ele transforma o elemento para o endereço da raiz do arquivo.
Alguem poderia me dar um help?
Aqui tenho o link do repositorio onde esta o arquivo completo dentro da pasta public:
https://github.com/AionAngel/JavaScriptI.git
Obrigado!