Especificaciones del ejemplo:
//reglas de estilo CSS < style type="text/css"> #container div.result p#destacado {font-size:18px;font-style:italic;} .result div p:first-child{background-color:#FFA500; font-style:none; font-variant:small-caps;padding:3px;} .marcado{background-color:#FFA500; font-style:none; font-variant:small-caps;padding:3px;} .result div{overflow:hidden;} .result div a{margin:5px 10px 10px; float:right;} < /style> //Código en jQuery < script type="text/javascript"> function agregar_p(){ $('.result div').append('< p>Párrafo de prueba< /p>'); } function agregar_h2(){ $('.result').append($('.result h2')); } function agregar_text(){ $('.result p').eq(0).append(document.createTextNode(' Texto de prueba ')); } function agregar_Alink(){ $('.result div p:last-child').after("< a class='ver_mas' href='#'>Leer más< /a>"); } function agregar_Btext(){ $('.result div p:first-child').before(document.createTextNode('Comienzan párrafos:')); } script> //código en HTMl < div class = "result"> < h2>Contenido< /h2> < div> < p>Párrafo 1< /p> < /div> < div> < p>Párrafo 2< /p> < /div> < div> < p>Párrafo 3< /p> < /div> < div> < p>Párrafo 4< /p> < /div> < /div> < form> < input type="button" value="Agregar P" onClick="agregar_p()"> < input type="button" value="Agregar contenido h2" onClick="agregar_h2()"> < input type="button" value="Agregar text" onClick="agregar_text()"> < input type="button" value="Before text" onClick="agregar_Btext()"> < input type="button" value="After HTML" onClick="agregar_Alink()"> < /form>
Párrafo 1
Párrafo 2
Párrafo 3
Párrafo 4