Insertar elementos HTML

Especificaciones del ejemplo:

  1. Cuatro divs con un párrafo descendiente a cada uno.
  2. Al primer párrafo descendiente a un div se le aplica el siguiente estilo: color de fondo #FFA500, el texto en mayúsculas pequeñas y un relleno de 3px.
  3. Se crean las funciones de jQuery: agregar_p(), agregar_h2(), agregar_text(), agregar_Btext() y agregar_Alink() con sus mecanismos de acción.
    1. agregar_p( ).- Método que utiliza append() para agregar un párrafo al final de cada div.
    2. agregar_h2( ).- Método que utiliza append() para cambiar la posición del h2 definido al principio de div.result al final dicho contenedor.
    3. agregar_text( ).- Método que utiliza append() y document.createTextNode('str') para agregar el texto 'str' al primer párrafo descendiente del div con clase "result".
    4. agregar_Btext().- Método que utiliza before() y document.createTextNode('str') para agregar el texto 'str' antes del primer párrafo descendiente de un div, que a su vez descienda de un elemento con clase "result".
    5. agregar_Alink().- Método que utiliza after() para agregar un link después del último párrafo descendiente a un div que a su vez descienda de un elemento con clase "result".
//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:'));
  }


//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>

Manipular HTML en result

Contenido

Párrafo 1

Párrafo 2

Párrafo 3

Párrafo 4