Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Tentando o mesmo exercicio com JS puro

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!

3 respostas
solução!

Oi Lucas.

Testei seu código aqui e realmente ele substitui o link por uma URL. Estranho, não sabia que o JavaScript tinha esse comportamento.

Isso acontece por causa da seguinte linha:

td.innerHTML = dado;

Você atribui ao innerHTML um elemento do DOM ao invés de um texto, por alguma razão. Para contornar isso, troque essa linha por essas duas:

if(dado.nodeType != 1) td.innerHTML = dado;
else td.appendChild(dado);

A propriedade nodeType é igual a 1 se a variável é um elemento DOM e undefined se for uma string ou um número.

Abraços!

Nossa que top Tomás , procurei muito por esta solucao! muito obrigado mesmo, nao sabia desse evento de nodeType! Show De bola! Valeu!

Disponha Lucas! Abraços.