Exemplo:
Aqui teríamos um primeiro parágrafo com link.
E aqui o parágrafo seguinte.
Ao clicarmos no link, teríamos:
Aqui teríamos um parágrafo com link.
Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.
E aqui o parágrafo seguinte.
Uma variação que também já vi é quando, ao clicarmos, o link "cria" texto no mesmo parágrafo, como a seguir:
Aqui teríamos um parágrafo com link. Aqui o novo texto adicional, agora no mesmo parágrafo do link.
E aqui o parágrafo seguinte.
Obrigado,
Henrique
Existem algumas várias maneiras de fazer isso e tudo depende muito da sua necessidade.
A forma mais fácil é você deixar oculto com css o parágrafo do meio e mudar o valor do atributo css para exibi-lo ao clicar no link:
<p>Aqui teríamos um primeiro parágrafo com <a href="#" onclick="java script:document.getElementById('oculto').display='';">link</a>.</p>
<p id="oculto" style="display:none;">Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.</p>
<p>E aqui o parágrafo seguinte.</p>
Você pode também criar o parágrafo dinamicamente usando DOM (e para isso existem n maneiras). Abaixo um exemplo bem simples:
<script type="text/javascript">
function criaParagrafo()
{
objP = document.createElement("p");
objTxt = document.createTextNode("Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.");
objP.appendChild(objTxt);
objPrimeiroParagrafo = document.getElementById("primeiro");
objPrimeiroParagrafo.appendChild(objP);
}
</script>
<p id="primeiro">Aqui teríamos um primeiro parágrafo com <a href="#" onclick="java script:criaParagrafo();">link</a>.</p>
<p>E aqui o parágrafo seguinte.</p>
Edição feita por: celsoendo, 25/06/2009, 00:12.