Cerrar tag de HTML con Javascript

s0b · #1 (**permalink**) 25/08/2008, 07:23

Estoy haciendo un codigo en Javascipt que identifica un elemento y antes de ese elemento inserta otro, seguro que con codigo lo entendeis mejor:

Código:

var todospre, estepre;
todospre = document.evaluate(
    "//pre[@class='caja']",
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);
for (var i = 0; i < todospre.snapshotLength; i++) {
    estepre = todospre.snapshotItem(i);
    
    fin = document.createElement('a');
    estepre.parentNode.insertBefore(fin, estepre);
    
}

Resulta que este codigo lo que hace es algo asi:

Código HTML:

<a></a><pre class="caja">lalala</pre>

Y lo que yo quiero es solo cerrar el enlace, esto:

Código HTML:

</a><pre class="caja">lalala</pre>

He probado con document.write y cosas asi, pero sin resultado. ¿Se os ocurre alguna idea de meter solo el tag de cerrar enlace?

Un saludo!

David · #2 (**permalink**) 25/08/2008, 07:54

Pero, ¿cuál sería la lógica de eso?. ¿Has probado con innerHTML?. Aunque creo que usando correctamente document.write() resuelve el problema.

Pero sigo sin entender cuál sería la utilidad o la lógica de eso.

Panino5001 · #3 (**permalink**) 25/08/2008, 08:03

Podrías usar regExp:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>

<body>
<div id="contenedor"><a></a><pre class="caja">lalala</pre></div>

<script>
re=/\<a\>\<\/a\>/gi;
var test=document.getElementById('contenedor').innerHTML=document.getElementById('contenedor').innerHTML.replace(re,'</a>');
alert(test);
</script>
</body>
</html>

foreverOdd · #4 (**permalink**) 25/08/2008, 08:06

trata con algo asi:

var enlace= document.createElement('a');
var textoEnlace = document.createTextNode('Lo que va dentor del enlace');
enlace.appendChild(textoEnlace);
document.getElementById('elemento').appendChild(en lace);

Suerte

Panino5001 · #5 (**permalink**) 25/08/2008, 08:09

Cita:

Iniciado por foreverOdd

trata con algo asi:

var enlace= document.createElement('a');
var textoEnlace = document.createTextNode('Lo que va dentor del enlace');
enlace.appendChild(textoEnlace);
document.getElementById('elemento').appendChild(en lace);

Suerte

Eso es casi lo que esta haciendo, sólo que usando xPath en lugar de DOM

foreverOdd · #6 (**permalink**) 25/08/2008, 08:15

Solo le quice hacer ver que el enlace lo esta agragando antes del contenido que desea, cuando en contenido lo debe insertar dentro del enace
Pero gracias por la correcion

s0b · #7 (**permalink**) 25/08/2008, 08:30

Perdonad la confusion, estoy aprendiendo Javascript y para ello me estoy poniendo retos (para hacermelo mas ameno). Este ejemplo trata de modificar una pagina en HTML para posteriormente modificarla localmente haciendo un script para Greasemonkey (el addon de Firefox).

En dicha pagina hay un enlace mal puesto antes del <pre>, por lo que tengo que identificar el <pre> y añadir el tag de cerrar enlace antes de que el <pre> empieze, ya que sino su contenido estara enlazado. Algo asi:

Código HTML:

<head>
<title>Prueba></title>
</head
<body>
<a href="http://google.es">Enlace
<pre class="caja">lalala</pre>
</body>

El resultado que busco y que aun no he sido capaz de conseguir es añadir el </a> antes del pre.

Código HTML:

<head>
<title>Prueba></title>
</head
<body>
<a href="http://google.es">Enlace</a>
<pre class="caja">lalala</pre>
</body>

Con el codigo que he puesto en el primer post soy capaz de identificar el <pre> por su clase, pero no puedo añadir solo el </a>.

Espero haber aclarado un poco el proposito. Y muchisimas gracias por las respuestas.

foreverOdd · #8 (**permalink**) 25/08/2008, 08:37

Hola

como le estbas haciendo al principio es la solucion que buscas, solo que debes "llenar" el enlace, de lo contrario no veras nada porque <a></a> no arroja ninguna salida
quiza asi te sirva:

fin = document.createElement('a');

textoEnlace = document.createTextNode('Lo que va dentro del enlace');
fin.appendChild(textoEnlace);
fin.href="http://google.es";
estepre.parentNode.insertBefore(fin, estepre);

s0b · #9 (**permalink**) 25/08/2008, 17:51

En primer lugar, de nuevo, dar las gracias a todos los que habeis respondido.

Ya he conseguido solucionarlo, de una forma muy enrevesada pero funciona perfectamente, he añadido un ondblclick al enlace:

Código:

var todosa, estea, todospre, estepre, estepre2;

todosa = document.evaluate(
    "//a[@ondblclick]",
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

todospre = document.evaluate(
    "//pre[@class='caja']",
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);
    
for (var i = 0; i < todosa.snapshotLength; i++) {
    estea = todosa.snapshotItem(i);
    estepre = todospre.snapshotItem(i);
  
  	estepre2 = document.createElement("div");
	estepre2.appendChild(estepre);
    estea.parentNode.insertBefore(estepre2, estea);

    estea.parentNode.removeChild(estea);
}