Tenho uma UL
que contem algumas noticias, dentro dela as noticias ficam dentro de li's
. Nisso a primeira tag leva o Título da notícia e o link da matéria.
<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>
Preciso passar os títulos para uma tag H1
e os links para uma tag A com o texto "Saiba mais", tudo isso dentro de uma DIV
que o conteúdo possa ser editado e copiado. Para isso desenvolvi a seguinte página onde há uma TEXTAREA
que recebe o código que possui o 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>
Porém ele retorna o texto duplicado e incompleto:
> 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
Sou iniciante em JS e não estou conseguindo resolver esse problema.