JavaScript - Javascript DOM

Javascript DOM

Publicado por benru82 (18 intervenciones) el 22/12/2020 23:14:07

Buenas a todos, soy nuevo por aquí y nuevo también en javascript. Estoy intentando realizar un ejercicio y la verdad que ando perdidísimo. Resulta que he de crear un script que utilizando el acceso a los nodos del DOM me cree en mi archivo html un párrafo adicional con el contenido del párrafo <p> y de las cabeceras <h1>, <h2>, <h3> ... todo eso através de un botón (que al darle me salga ese párrafo adicional).

He creado mi archivo html básico con si contenido, el botón también y en enlace a la página *js, pero no sé que tipo de función he de crear y si bien es un “appendchild” o bien un getelelement “id”.

A ver si alguien me puede echar una mano.

Muchas gracias y un saludo.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

Javascript DOM

Publicado por joel (895 intervenciones) el 23/12/2020 08:35:50

Hola, aquí te muestro un simple ejemplo de añadir un <p> y un <h1>... espero que te sirva.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

</body>

</html>

<script>

const body=document.querySelector("body");

const p=document.createElement("p");

p.textContent="prueba <P>";

body.appendChild(p);

const h1=document.createElement("h1");

h1.textContent="prueba <H1>";

body.appendChild(h1);

</script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Javascript DOM

Publicado por benru82 (18 intervenciones) el 23/12/2020 12:01:34

Buenas!! Y si ese contenido (h1,h2,h3, y p) ya los tengo creados y los quiero agregar en un sólo párrafo a través de un botón??

Gracias y un saludo.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Javascript DOM

Publicado por joel (895 intervenciones) el 23/12/2020 20:43:34

Seria algo así:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <h1>texto H1</h1>

    <p>parrafo!!!</p>

</body>

<input type="button" value="Poner <H1> dentro de <p>" onclick="mover()">

</html>

<script>

function mover() {

    const p=document.querySelector("p");

    const h1=document.querySelector("h1");

    p.appendChild(h1);

</script>

Valora esta respuesta

Comentar

Javascript DOM

Publicado por benru82 (18 intervenciones) el 23/12/2020 21:41:27

Buenas, primero de todo muchas gracias por tus respuestas!!

Estoy intentándolo hacer como me comentas pero no me se me agrega el párrafo ese nuevo con el contenido de h1,h1,h3 + p ... como nuevo contenido de la página. Estoy creando las constantes tanto de "p" como de "h1", "h2","h3" ... pero sólo me sale la última.

Esto es exactamente lo que me pide:
"1. Crea un script que utilizando el acceso a los nodos del DOM, muestre el texto que contienen los nodos párrafos (<p>) y cabeceras (desde <h1> hasta <h6>) de la página web. Se debe mostrar el contenido de estos elementos en un párrafo adicional que se añade cuando se solicita la información mediante un botón"

Muchas gracias por las molestias , un saludo.

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Javascript DOM

Publicado por Alejandro (540 intervenciones) el 23/12/2020 23:45:27

Alejandro se encuentra ahora conectado en el
chat de PHP

Así lo entendí

<script>

	function verInfo(){

		n = document.querySelectorAll('P').length;

		p = document.createElement('p');

		document.querySelector('body').appendChild(p);

		p = document.querySelectorAll('P')[n];

		for(i=1; i<=6; i++){

			texto = 'H'+i+' Contiene: "'+document.querySelector('h'+i).innerText+'"';

			p.appendChild( document.createTextNode(texto) );

			p.appendChild( document.createElement('br') );

		texto = 'P Contiene: "'+document.querySelector('P').innerText+'"';

		p.appendChild( document.createTextNode(texto) );

</script>

<h1>Este es H1</h1>

<h2>Este es H2</h2>

<h3>Este es H3</h3>

<h4>Este es H4</h4>

<h5>Este es H5</h5>

<h6>Este es H6</h6>

<p>Este es P</p>

<button type="button" onclick="verInfo()">Mostrar información</button>

Valora esta respuesta

Comentar

Javascript DOM

Publicado por benru82 (18 intervenciones) el 24/12/2020 10:16:29

Buenas!!!

He copiado el código tal y como me pones, le doy al click del botón y no me hace absolutamente nada, ni me aparece el nuevo párrafo con todo el contenido ni nada.

un saludo y gracias

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Javascript DOM

Publicado por Alejandro (540 intervenciones) el 24/12/2020 18:01:30

Alejandro se encuentra ahora conectado en el
chat de PHP

Puede ser que tengas bloqueado la ejecución de JavaScript, por ejemplo en Microsoft Edge en la barra de dirección muestra un icono de bloqueo. En Internet Explorer aparece una barra abajo con el botón "Permitir contenido bloqueado"

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Javascript DOM

Publicado por joel (895 intervenciones) el 24/12/2020 16:04:31

Como lo estas haciendo? puedes mostrar tu código?

Valora esta respuesta

Comentar

Javascript DOM

Publicado por benru82 (18 intervenciones) el 24/12/2020 20:37:44

Buenas noches!! Ahora sí que me sale al darle al botón, pero querría que no me saliera :

H1 Contiene: "contenido1"
H2 Contiene: "contenido2"
H3 Contiene: "contenido3"
H4 Contiene: "contenido4"
H5 Contiene: "contenido5"
H6 Contiene: "contenido6"
P Contiene: "todos los contenidos"

lo que marco en negrita, y las " " que remarcan los contenidos.

muchas gracias y felices fiestas!!

Valora esta respuesta

-1

Comentar

Pos: 1

Val: 3.506

Javascript DOM

Publicado por joel (895 intervenciones) el 25/12/2020 08:45:33

Si no muestras tu código, no se como ayudarte!!

Valora esta respuesta

Comentar

Javascript DOM

Publicado por benru82 (18 intervenciones) el 25/12/2020 12:12:28

Buenos días, te paso el código que puse:

<!DOCTYPE html>

<html lang="es">

  <head>

    <meta charset="utf-8">

    <title>Mostrar texto de cabecera y párrafos</title>

    <script type="text/javascript" src="js/ejemplo.js"></script>

  </head>

  <body>

    <h1>contenido1</h1>

    <h2>contenido2</h2>

    <h3>contenido3</h3>

    <h4>contenido4</h4>

    <h5>contenido5</h5>

    <h6>contenido6</h6>

    <p>todos los contenidos</p>

    <button type="button" onclick="mostrar()">Mostrar información</button>

  </body>

</html>

function mostrar() {

    n = document.querySelectorAll('P').length;

    p = document.createElement('p');

    document.querySelector('body').appendChild(p);

    p = document.querySelectorAll('P')[n];

    for(i=1; i<=6; i++){

        texto = 'H'+i+' Contiene: "'+document.querySelector('h'+i).innerText+'"';

        p.appendChild( document.createTextNode(texto) );

        p.appendChild( document.createElement('br') );

    texto = 'P Contiene: "'+document.querySelector('P').innerText+'"';

    p.appendChild( document.createTextNode(texto) );

Y bueno lo que comente en mi anterior intervención, querría que no me saliera el mensaje, que al ejecutar el script pone:

H1 Contiene: "contenido1"
H2 Contiene: "contenido2"
H3 Contiene: "contenido3"
H4 Contiene: "contenido4"
H5 Contiene: "contenido5"
H6 Contiene: "contenido6"
P Contiene: "todos los contenidos"

lo que marco en negrita, y si puede ser que no me salgan las " " .... de los contenidos.

Un saludo y gracias.

Valora esta respuesta

-1

Comentar

Pos: 1

Val: 3.506

Javascript DOM

Publicado por joel (895 intervenciones) el 25/12/2020 14:45:34

De verdad??? el código lo has copiado y no lo has ni mirado, no??

Solo tienes que mirar el código y quitar lo que sobra!!!!!

Simeplemente reemplaza la linea:

texto = 'H'+i+' Contiene: "'+document.querySelector('h'+i).innerText+'"';

por:

texto = document.querySelector('h'+i).innerText;

y la linea:

texto = 'P Contiene: "'+document.querySelector('P').innerText+'"';

por:

texto = document.querySelector('P').innerText;

Valora esta respuesta

Comentar

Filtrar lista JS

Patrón de círculos con colores alternos en canvas