Pues yo iría con jQuery. Es muy fácil. Te hice un ejemplo:
Código HTML:
Ver original<!DOCTYPE html>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){
//al hacer click en insertar
$('#insertar').click(function(){
var texto = $('#texto-a-insertar').val();
$('#insertame-texto').html('
<p>'+ texto +'
</p>');
});
});
<label for="texto-a-insertar">Texto a insertar:
</label><input id="texto-a-insertar" /> <input type="button" id="insertar" value="insertar texto en div" />
<div id="insertame-texto">
Acá lo podés ver en funcionamiento:
http://jsbin.com/egini3
La idea es usar el muy útil .html() de jquery. Lo que hace es reemplazar el html interior del elemento que has obtenido con el selector. También podés lograr efectos parecidos con .append(), .after(), .before(). Todas bien documentadas en el sitio de jquery: www.jquery.com