Javascript for Loop - Incomplete and duplicated content

Question

I have a UL that contain some news, inside it the news is inside li's. In this the first tag takes the headline and the link of the article.

<ul>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 1
    </a>
    <br>
    Texto da noticia 1
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 2
    </a>
    <br>
    Texto da noticia 2
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 3
    </a>
    <br>
    Texto da noticia 3
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 4
    </a>
    <br>
    Texto da noticia 4
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 5
    </a>
    <br>
    Texto da noticia 5
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 6
    </a>
    <br>
    Texto da noticia 6
    <br>
    <a href="">Leia mais</a>
</li>

I need to pass the titles to a tag H1 and the links to an A tag with the text "Learn more", all within a DIV that the content can be edited and copied. For this I developed the following page where there is a TEXTAREA that receives the code that has the UL.

function carregarConteudoHtml (){
			
			//renderiza o valor da textarea em uma DIV no documento
			var htmlEntrada = document.getElementById("html").value;
			document.getElementById("entradaHtml").innerHTML = htmlEntrada;
			
			
			var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
			
			var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
			var numeroLi = conteudoUl.getElementsByTagName("li").length; //conta o número de LIs dentro da UL
		
			// faz um loop para o número de LIs que existem na UL
			for (i = 0; i<numeroLi; i++){ 
				
				var conteudoLi = conteudoUl.getElementsByTagName("li")[0];// aarmazena o conteudo da primeira LI dentro da UL
				
				conteudoUl.removeChild(conteudoUl.firstChild);// exclui a primeira LI para que a LI de baixo seja a primeira
								
				var titulo = conteudoLi.getElementsByTagName("a")[0].innerHTML; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI
				var botao = conteudoLi.getElementsByTagName("a")[0].href; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI

				//armazena o que estava antes e soma com o novo
				var conteudoSaida = document.getElementById("saida").innerHTML; //armazena o conteudo da DIV
				var noticiaEmail = document.getElementById("saida").innerHTML = "<br>" + conteudoSaida + '<h2>'+titulo+"</h2><a href="+botao+">Saiba mais</a><br>"; // soma o conteudo que tinha antes na DIV e insere com os novos
			}
		}

<textarea id="html"></textarea>
	<div id="entradaHtml" style="display: none"></div>
	<button onClick="carregarConteudoHtml()">OK</button>
	<div id="saida" contenteditable="true"></div>

But it returns the duplicated and incomplete text:

> Título Notícia 1
> 
> Saiba mais Título Notícia 1
> 
> Saiba mais Título Notícia 2
> 
> Saiba mais Título Notícia 2
> 
> Saiba mais Título Notícia 3
> 
> Saiba mais Título Notícia 3
> 
> Saiba mais

I’m a beginner in JS and I’m not able to solve this problem.

Answer 1

Within the FOR looping, you always used item 0 instead of variable "i" to get HTML from LI.

var conteudoLi = conteudoUl.getElementsByTagName("li")[i];

To interact using the variable "i", I had to take the following line:

conteudoUl.removeChild(conteudoUl.firstChild)

Follow the example working.

function carregarConteudoHtml (){
			
			//renderiza o valor da textarea em uma DIV no documento
			var htmlEntrada = document.getElementById("html").value;
			document.getElementById("entradaHtml").innerHTML = htmlEntrada;
			
			
			var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
			
			var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
			var numeroLi = conteudoUl.getElementsByTagName("li").length; //conta o número de LIs dentro da UL
		
			// faz um loop para o número de LIs que existem na UL
			for (i = 0; i<numeroLi; i++){ 
				
				var conteudoLi = conteudoUl.getElementsByTagName("li")[i];// aarmazena o conteudo da primeira LI dentro da UL
				
				//conteudoUl.removeChild(conteudoUl.firstChild);// exclui a primeira LI para que a LI de baixo seja a primeira
								
				var titulo = conteudoLi.getElementsByTagName("a")[0].innerHTML; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI
				var botao = conteudoLi.getElementsByTagName("a")[0].href; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI

				//armazena o que estava antes e soma com o novo
				var conteudoSaida = document.getElementById("saida").innerHTML; //armazena o conteudo da DIV
				var noticiaEmail = document.getElementById("saida").innerHTML = "<br>" + conteudoSaida + '<h2>'+titulo+"</h2><a href="+botao+">Saiba mais</a><br>"; // soma o conteudo que tinha antes na DIV e insere com os novos
			}
		}

<textarea id="html">
<ul>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 1
    </a>
    <br>
    Texto da noticia 1
    <br>
    <a href="#link1">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="#link2">
        Título Notícia 2
    </a>
    <br>
    Texto da noticia 2
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="#link3">
        Título Notícia 3
    </a>
    <br>
    Texto da noticia 3
    <br>
    <a href="">Leia mais</a>
</li>
</ul>
</textarea>
	<div id="entradaHtml" style="display: none"></div>
	<button onClick="carregarConteudoHtml()">OK</button>
	<div id="saida" contenteditable="true"></div>

Answer 2

While executing your code error occurs:

{ "message": "Uncaught Typeerror: Cannot read Property 'getelementsbytagname' of Undefined", "filename": "https://stacksnippets.net/js", "lineno": 26, "colno": 30 }

I believe the error is due to the fact that you try to refer to elements that do not exist in the DIV.

Note that the UL and LI elements are not nested (within) in the DIV represented by the "html) variable".

var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
var numeroLi = conteudoUl.getElementsByTagName("li").length;