image
Inicio » Foros » JavaScript

JavaScript

incrustar codigo html en la misma pagina

Volver al foro | Responder | Añadir nuevo tema


De: Carlos
Fecha: 10/07/2007
Mensaje:

saludos... necesito ayuda de ustedes tengo un codigo en javascript que me genera un codigo html, lo que quiero hacer es que este codigo html que se genero con la funcion en javascript pueda verse en la misma pagina desde donde activo la funcion javascript se puedo o no hacer esto por favor necesito ayuda


Quizás le interese
De: ZeroKilled
Util para: 11 personas

Fecha: 11/07/2007
Mensaje:

hay varias formas para lograrlo, pero dependiendo de la situacion, una tecnica u otra es mas conveniente. primero, principalmente hay dos formas de como generar codigo html a traves de javascript: una cadena de codigo html, o con funciones DOM. en todo caso, la forma de integrar el codigo html se diferencian el uno del otro.

el mas facil de integrar, aprender, y entender es aquel que utiliza una cadena de codigo html. varios ejemplos de cadenas podrian ser:
var code = '<p><img src="url" alt="texto" />mi imagen</p>';
var sample = 'usted esta en este documento <a href="' + location.href + '">link</a>';
var openP = '<p>';
var closeP = '</p>;

esta tecnica puede utilizarse tanto mientras carga el documento o luego de cargar el documento. sin embargo, los metodos son diferentes para ambos casos.

- mientras carga el documento
si quieres cargar el codigo junto con el documento, es preferible usar la funcion document.write. es tan simple como pasar la cadena o variable como argumento a la funcion:
document.write(openP);
document.write('aqui puedo poner un texto tan largo como quiera, o <b>inclusive</b> cualquier otro contenido html. ');
document.write('o mejor aun, que el usuario entre un texto. ' + prompt('ingresa un texto'));
document.write(closeP);

- luego de cargar documento
no podemos emplear document.write porque una vez cerrado la escritura al documento, document.write abre la misma provocando que el contenido actual se pierda. en otras palabras es como cargar otro nuevo documento. aqui es similar al anterior, salvo que en este caso necesitaremos del elemento en que sera cargado el nuevo contenido. suponiendo que en mi codigo html tengo lo siguiente <div id='generated'></div> para añadir el nuevo contenido, el script para el ejemplo anterior seria algo como sigue:
var block = document.getElementById('generated');
block.innerHTML = openP;
block.innerHTML += 'aqui puedo poner un texto ... <b>inclusive</b> codigo html. ';
block.innerHTML += 'el usuario brinda el texto. ' + prompt('ingresa un texto');
block.innerHTML += closeP;

notese que ahora no se trata de un texto, sino de una propiedad, innerHTML que hereda la mayoria de los elementos html. notese tambien que he empleado el operador +=, esto significa que seguira añadiendo el contenido. si en lugar usaramos el operador =, estaria sobre escribiendo lo que tenia antes, en este caso dejando como contenido la ultima sentencia: block.innerHTML = closeP. debo mencionar que aunque esta utlima tecnica funciona, la propiedad innerHTML no esta estandarizada por la w3c, lo cual puede resultar innoperante en algun navegador.

- modelo DOM (document object model)
esta tecnica quizas sea la mas preferida por los programadores mas avanzados, y probablemente sea algo tedioso. este modelo viene mejor para cuando se quieres crear herramientas mas sofisticada, pero vale la pena mencionar un ejemplo sencillo. para que este modelo funcione es muy importante que el documento finalice la carga porque este modelo depende en gran medida de la estructura de dicho documento. este modelo define cientos de objetos, metodos y propiedades, pero la que me quiero centrar son en tres metodos: document.createElement(), document.createTextNode, y NODO.appendChild().

createElement crea un elemento html, createTextNode crea un 'espacio' para integrar texto (no codigo html), y appendChild agrega un elemento al nodo. fijate que he escrito NODO, esto porque un nodo puede ser cualquier elemento en el documento html, en general los elementos HTML y el texto. aplicado al ejemplo anterior, podria ser como sigue:
var p = document.createElement('p');
var b = document.createElement('b');
b.appendChild(document.createTextNode('inclusive'));
var str1 = document.createTextNode('aqui puedo poner un texto ... ');
var str2 = document.createTextNode('codigo html. el usuario brinda el texto');
var user = document.createTextNode(prompt('ingresa un texto'));

// suponiendo que el div generated existe en el documento;
var block = document.getElementById('generated');
block.appendChild(p);
p.appendChild(str1);
p.appendChild(b);
p.appendChild(str2);
p.appendChild(user);

supongo que ahora entiendes porque resulta tedioso el modelo DOM; todo el codigo que se necesita para producir un resultado similar al anterior. por supuesto, este ejemplo no es practico pero al menos demuestra el concepto sobre crear codigo y agregarlo al documento. al fin y al cabo, estoy seguro que optaras por las primeras dos soluciones... suerte.



De: yu
Util para: 2 personas

Fecha: 25/07/2007
Mensaje:

uy



De: rarfa
Util para: 1 personas

Fecha: 16/08/2007
Mensaje:

esta es una prueba




De: Danix
Util para: 0 personas

Fecha: 31/08/2007
Mensaje:

HOLA ALGUIEN ME PUEDE AYUDAR, PUES QUIERO AGREGAR EN EL CODIGO HTML, EL CODIGO JAVASCRIT, SE PODRA... TENGO EN MI SITIO BLOGGER TRES COLUMNAS, LA CUAL LAS DOS LATERALES, TIENEN JAVASCRIT Y HTML PERO LA DEL MEDIO SOLO TIENE HTML Y ES AHI DONDE QUISIERA PONER EL JAVASCRIT. GRACIAS POR LA AYUDA



De: ZeroKilled
Util para: 0 personas

Fecha: 31/08/2007
Mensaje:

hay tantas posibilidades, pero desconozco cuales son tus posibilidades debido a que trabajas en un sistema de blog de modo que puede contener restrincciones en cuanto al tipo de codigo que subes. si el sistema te permite subir codigo javascript para las columnas laterales, entonces considero que no es necesario subir uno para la columna central. tu puedes trabajar desde los script laterales para alterar el contenido central, de ti depende el conocimiento que tengas en el lenguaje para hacerlo.

resumiendo, si el sistema te permite subir javascript, puedes alterar cualquier parte del documento independientemente desde donde se cargue el script. en el caso contrario, no puedes hacer nada.



De: Carlos alcaraz
Util para: 0 personas

Fecha: 20/09/2007
Mensaje:

Almacena la funcion en una variable por medio de javascript y le antepones el tag <pre> codigo javascript </pre>

Ej. var lc_funcion = "<pre>" + tomar_contenido_funcion + "</pre>"

document.write(lc_Funcion) y listo .. si tienes dudas, por favor escríbeme





De: enrique
Util para: 0 personas

Fecha: 13/07/2008
Mensaje:

Tengo un formulario dinámico de manera que puedo agregar un grupo de campos (relativos a un nuevo familiar) cada vez que le doy a un boton (con javascript). El problema es que uno de esos campos es la fecha de nacimiento, y tengo un calendario popup que necesita tener el siguiente código javascript después, y solo después, del input de la fecha. Asi: Me gustaría saber cómo insertar ese script cada vez que añado un familiar porque lo mas que he conseguido es que me salga como texto visible en la página, en lugar de interpretarlo como código. Lo hago así: function creaCalendario(c,i) { var donde=document.getElementById("divDeCalendarios"); var contenedor=document.createElement('span'); var div=document.createElement('div'); div.id='div'+i; contenedor.appendChild(document.createTextNode('\n')); contenedor.appendChild(document.createTextNode('var '+c+'= new calendar3(document.forms[solicitudForm].elements[famiFechaNac'+i+']);\n')); contenedor.appendChild(document.createTextNode(c+'.year_scroll = true;\n')); contenedor.appendChild(document.createTextNode(c+'.time_comp = false;\n')); contenedor.appendChild(document.createTextNode('')); div.appendChild(contenedor); donde.appendChild(div); }



De: enrique
Util para: 0 personas

Fecha: 13/07/2008
Mensaje:

No se pq no ha salido el codigo del jsp. A ver, decia que el formulario debe ir asi, con el script detras del input de la fecha:



De: enrique
Util para: 0 personas

Fecha: 13/07/2008
Mensaje:

3er intento:



De: enrique
Util para: 0 personas

Fecha: 13/07/2008
Mensaje:

4º... :S



De: enrique
Util para: 0 personas

Fecha: 13/07/2008
Mensaje:

bueno, os podeis hacer una idea: tengo el detras un link asi: y luego va el script, DETRAS: var cal=new calendar(document.forms[nombreForm]elements[fechaNac]); cal.year_scroll=true; cal.time_comp=false;



De: enrique
Util para: 2 personas

Fecha: 13/07/2008
Mensaje:

Tengo un formulario dinámico de manera que puedo agregar un grupo de campos (relativos a un nuevo familiar) cada vez que le doy a un boton (con javascript). El problema es que uno de esos campos es la fecha de nacimiento, y tengo un calendario popup que necesita tener el siguiente código javascript después, y solo después, del input de la fecha. Asi: "" "" "" "" Me gustaría saber cómo insertar ese script cada vez que añado un familiar porque lo mas que he conseguido es que me salga como texto visible en la página, en lugar de interpretarlo como código. Lo hago así: function creaCalendario(c,i) { var donde=document.getElementById("divDeCalendarios"); var contenedor=document.createElement('span'); var div=document.createElement('div'); div.id='div'+i; contenedor.appendChild(document.createTextNode('\n')); contenedor.appendChild(document.createTextNode('var '+c+'= new calendar3(document.forms[solicitudForm].elements[famiFechaNac'+i+']);\n')); contenedor.appendChild(document.createTextNode(c+'.year_scroll = true;\n')); contenedor.appendChild(document.createTextNode(c+'.time_comp = false;\n')); contenedor.appendChild(document.createTextNode('')); div.appendChild(contenedor); donde.appendChild(div); }



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:05 de Agosto de 2012. Spain - España.
© 1998-2004 por . Todos los derechos reservados.