Como fazer para o Javascript pegar a página externa várias vezes quando for chamado na página principal?

Question

Porque o elemento teste s&oacute; &eacute; carregado uma &uacute;nica vez e n&atilde;o v&aacute;rias vezes,
pois coloquei 3 div chamando o arquivo via js para ser inserido na div com classe=teste:
e como fazer para que seja adicionado a p&aacute;gina externa quantas vezes eu quiser ??

elemento s&oacute; aparece na primeira div com classe teste.

nome = paginaexterna.html 
 c&oacute;digo abaixo:    &lrm;    &lrm;    &lrm;

Answer

Ol&aacute; Gabriel
S&oacute; n&atilde;o entendi a parte do: [...] quantas vezes voc&ecirc; quiser.
- Porque para carregar em todas elas existe solu&ccedil;&atilde;o.

O problema de carregar somente a primeira &eacute; a fun&ccedil;&atilde;o utilizada: ➦ a querySelector captura apenas a primeira ocorr&ecirc;ncia.
Para capturar todas elas use uma destas:

querySelectorAll

getElementsByClassName

No script fa&ccedil;a no lugar de el:
 
Para o primeiro : target = (ponto + nome da classe)
Mas no segundo, target = (nome da classe)

E depois, para popular todas de uma vez s&oacute; precisa alterar uma linha:

&Eacute; isso!
Bom proveito!

Answer

Gabriel Roch... disse: Porque o elemento teste s&oacute; &eacute; carregado uma &uacute;nica vez e n&atilde;o v&aacute;rias vezes,
pois coloquei 3 div chamando o arquivo via js para ser inserido na div com classe=teste:
e como fazer para que seja adicionado a p&aacute;gina externa quantas vezes eu quiser ??

elemento s&oacute; aparece na primeira div com classe teste.

nome = paginaexterna.html 
 c&oacute;digo abaixo:&lrm;&lrm;&lrm;
&lrm;
H&aacute; tr&ecirc;s problemas aqui.

Primeiro, observe que as tr&ecirc;s divs que voc&ecirc; criou possuem a mesma id (meucoracao) e a mesma classe (teste). Acontee que, pelas normas da W3C, a id de um elemento deve ser &uacute;nica! Voc&ecirc; n&atilde;o pode ter mais de um elemento com a mesma id - &eacute; pra isso que servem as classes! Fazendo o que voc&ecirc; fez, o comportamento do c&oacute;digo JavaScript poder&aacute; ser imprevis&iacute;vel.

Segundo: XMLHttpRequest &eacute; muito antigo, o m&eacute;todo fetch &eacute; um substituto mais atual.

E, por &uacute;ltimo, seu c&oacute;digo &eacute; inseguro por padr&atilde;o. O que garante que ningu&eacute;m ir&aacute; colocar um endere&ccedil;o malicioso no par&acirc;metro arquivo? O correto a se fazer &eacute;, no m&iacute;nimo, uma valida&ccedil;&atilde;o de que o par&acirc;metro arquivo &eacute; uma URL local - e olhe l&aacute;! Veja que voc&ecirc; verifica se o elemento target existe, mas em nenhum momento verifica se arquivo existe ou se n&atilde;o &eacute; uma URL completa.

Answer

S&atilde;o boas as considera&ccedil;&otilde;es feitas pelo Andr&eacute;. Conv&eacute;m segu&iacute;-las, sempre.

O c&oacute;digo original n&atilde;o segue as boas pr&aacute;ticas de programa&ccedil;&atilde;o; S&oacute; n&atilde;o mencionei porque percebi que se tratava de teste com execu&ccedil;&atilde;o local usando 'GET', inclusive.

Mas para entender a solu&ccedil;&atilde;o do problema relatado est&aacute; tranquilo.
Ou seja, em produ&ccedil;&atilde;o &eacute; necess&aacute;rio redobrar a cautela.

Refor&ccedil;ando: ID repetido na mesma p&aacute;gina n&atilde;o deve existir. &ndash; Nunca!

Ferramentas

Mover Tópico