Manipulando arquivos externos com Javascript

[carloscoelhogti]

Olá pessoal
Estou a alguns meses estudando Javascript, e nao me considero um expert.

Preciso que minha pagina html exiba em um campo, seja paragrafo ou div, ou qualquer coisa o texto que está dentro de um arquivo txt.
O javascript para executar a leitura está funcionando. Porem nao consigo fazer com que o texto seja adicionado na pagina.
Tentei usar innerHtml para isso, só que nao funciona, apresenta erros e nao obitve sucesso.

Algum de vcs já executou algum projeto assim para poder compartilhar sua experiencia?
Infelizmente nao achei muito na internet sobre o assunto.

Desde já agradeço

[felquis]

Eai carlos, vejo algumas tarefas na sua pergunta, me diz quais você já conseguiu fazer.

1. Como carregar um arquivo txt no front-end
2. Como carregar um arquivo txt no servidor nodejs
3. Como inserir um texto dinâmico no HTML com JavaScript

Parece que sua dúvida é com relação ao item 3, se sim. Aqui vai algumas dicas:

Primeiro de um jeito de ter uma referência ao elemento que vc quer alterar dinamicamente, a gente fala "referencia ao elemento" ou "selecionar o(os) elemento(s)" a forma mais simples de começar selecionando elementos no DOM para obter uma referência dele e poder agir no elemento ou em seus filhos é através do método Element.querySelector

• https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelector

Digamos que você quer colocar o texto dinâmico no elemento body, seria algo assim:

const body = document.querySelector('body')
body.innerHTML = '<p>Stop Killing People\'s dreams</p>'

Na linha 1, a const body é uma referencia ao resultado do método document.querySelector e o primeiro parâmetro 'body' é o seletor do CSS para procurar elementos que se encaixam na descrição do selector neste caso muito simples, é apenas o "body".

Mas poderia ser algo especifico por exemplo o primeiro paragrafo dentro do elemento main document.querySelector('main p:first-child')

Na linha 2, é quando a gente já tem uma referencia ao elementos que queremos agir em cima, e podemos usar os métodos desse elementos. Uma dica é ler quais os métodos que tem nessa const body executando console.dir(body) no devtools irá aparecer todos os métodos, e um deles é o innerHTML que é um bem antigo e básico.

No lugar de document.querySelector('body') você pode usar qualquer seletor, e no JavaScript no browser há algumas maneiras de conseguir uma referencia a um elemento, querySelector é uma das mais flexíveis para aprendizado na minha visão.

Além do Element.innerHTML algo que uso bastante o Element.insertAdjacentHTML é um que eu uso frequentemente https://developer.mozilla.org/pt-BR/docs/Web/API/Element/insertAdjacentHTML

Espero que te ajude em algo, abraço! Posta ai sua solução, e diz o que você aprendeu para outras pessoas interessadas verem!