1
00:00:02,570 --> 00:00:09,810
En el video anterior vimos cómo acceder a contenido ya existente en nuestro documentos.

2
00:00:09,830 --> 00:00:17,690
En este video vamos a ver cómo crear contenido nuevo y vamos a comentar estas líneas.

3
00:00:20,710 --> 00:00:29,010
Y recuerda todo esto está dentro del documental The Bendixen Dom contendores quien nos ha creado un

4
00:00:29,010 --> 00:00:40,480
comentario que diga crear contenido y este debe estar dentro de algunas líneas de comentario.

5
00:00:41,010 --> 00:00:43,720
No era un poco de espacio para que quede al centro de la pantalla.

6
00:00:44,620 --> 00:00:50,510
Y vamos a suponer que queremos crear un contenido aquí en nuestros Aibar así que vamos a poner un bar

7
00:00:50,540 --> 00:00:59,090
salvar iguala documental punto dice el lector nada más tenemos un Sidebar podemos utilizar XLS electo

8
00:00:59,110 --> 00:01:07,820
nada más y acceder a Alcibar lo pongo aquí con solo Lop Sidebar nada más para comprobar que está funcionando

9
00:01:08,950 --> 00:01:15,520
vemos que funciona correctamente puede quitar esto y vamos a crear un nuevo elemento con el nuevo elemento

10
00:01:17,280 --> 00:01:25,980
Bahr nuevo elemento igual a document punto que íbamos a utilizar un nuevo método llamado criadita element.

11
00:01:26,850 --> 00:01:27,990
Qué elemento queremos crear.

12
00:01:28,000 --> 00:01:37,090
Bueno hay que crear un H1 siguiente creamos un nuevo texto igual a document punto y aquí estaremos utilizando

13
00:01:37,090 --> 00:01:41,400
otro nuevo método que se llama Create text.

14
00:01:41,470 --> 00:01:49,640
No queremos poner Hola mundo entonces puedes ver que estamos creando primero la H1 que vendría siendo

15
00:01:49,640 --> 00:01:56,390
como crear algo así H1 y luego creamos concreté text Nott el texto que va a tener el H1 que vendría

16
00:01:56,390 --> 00:02:00,570
siendo el washi pero esto es la forma de hacerlo en JavaScript.

17
00:02:02,380 --> 00:02:07,250
Después vamos a ponerle aquí un nuevo elemento o sea el H1 punto.

18
00:02:07,510 --> 00:02:14,590
Le damos a Pent Child o sea al H1 le vamos a agregar un hijo que vendría siendo el nuevo texto

19
00:02:17,400 --> 00:02:25,870
y por último lo pongo aquí Sidebar en la posición cero y le doy a Pent Child y pongo el nuevo elemento

20
00:02:27,860 --> 00:02:31,310
entonces estamos primeros creando el selector para Alcibar.

21
00:02:31,670 --> 00:02:34,960
Luego creó un nuevo un nuevo elemento que va a ser un H1.

22
00:02:34,970 --> 00:02:43,060
Como dije sería algo así como una H1 y luego concreté text not agregó este mundo y lo inserto aquí a

23
00:02:43,060 --> 00:02:52,540
medias entonces esto ya está en una variable que agrego Alcibar en la posición cero y lo va a insertar

24
00:02:52,540 --> 00:02:53,710
correctamente.

25
00:02:53,860 --> 00:02:58,380
Si guardo cambio si recargo y aquí se

26
00:03:03,960 --> 00:03:13,640
dice en la línea 72 que vendría siendo este si quisiera salvar nada más recargo que aparece Hola Mundo.

27
00:03:13,850 --> 00:03:18,290
Un pequeño error que aparece en el mundo de esta forma

28
00:03:23,050 --> 00:03:29,790
ya tenemos nuestro H1 y tiene el texto de Hola mundo y se le agrega en el bar de forma correcta.

29
00:03:29,790 --> 00:03:36,980
Vamos a ver otro ejemplo supongamos que aquí tenemos la entrada 1 2 3 4 5 y queremos crear la entrada

30
00:03:36,980 --> 00:03:47,990
6 vamos a poner aquí a agregar entradas 6 y ponemos el siguiente texto ponemos enlaces salvar y habíamos

31
00:03:48,000 --> 00:03:59,380
creado un selector parecido a este document punto y le ponemos XLS el lector y vamos a ponerle aquí.

32
00:03:59,770 --> 00:04:06,340
Salvar huele para que no seleccione el 1 Order List y luego veamos creándole enlace

33
00:04:10,990 --> 00:04:12,910
y vamos a ponerle par.

34
00:04:12,960 --> 00:04:23,450
Nuevo Enlace y en mayúscula creamos el documento con valorábamos el enlace con document create element.

35
00:04:23,600 --> 00:04:28,030
Así que recuerda create Element siempre va a crearte un nuevo elemento.

36
00:04:28,030 --> 00:04:37,550
Puedes ver que aquí tenemos Element no todo lo que sea un enlace un H1 etc. es un elemento que tenemos

37
00:04:37,550 --> 00:04:42,350
que utilizar y que iba a ser el tipo a porque los enlaces son de tipo Junker.

38
00:04:42,410 --> 00:04:51,890
Aquí creamos un H1 aquí estamos creando un enlace con la siguiente le pongo Bahr texto enlace aquí estamos

39
00:04:51,890 --> 00:04:57,540
creando el enlace sin embargo el enlace quedaría así vacío nada más.

40
00:04:57,800 --> 00:05:00,350
Entonces necesitamos un texto para ese enlace.

41
00:05:00,420 --> 00:05:06,600
Para eso vamos a crear esta variable texto enlace document punto create text now.

42
00:05:07,470 --> 00:05:18,680
Y aquí lo vamos a poner el texto entradas 6 entradas 6 y luego agregamos ese nuevo enlace o la ponemos

43
00:05:18,690 --> 00:05:21,670
a Pent Chaín y le ponemos texto enlace

44
00:05:27,890 --> 00:05:34,460
después tenemos que crear la lista porque si ves aquí tenemos una logo tenemos una ley así que tenemos

45
00:05:34,460 --> 00:05:38,900
que crear la lista ponemos algún comentario aquí que diga creando la lista

46
00:05:41,480 --> 00:05:47,670
Bahr nueva lista igual a document punto criadita element.

47
00:05:48,300 --> 00:05:55,280
Este va a ser el tipo de Lehi y aquí le ponemos la nueva lista.

48
00:05:55,530 --> 00:06:05,580
Vamos a dar una charla y quiero agregar el nuevo enlace que he creado.

49
00:06:06,190 --> 00:06:13,150
Así estamos creando desde el enlace luego le insertamos el texto y luego le leí le agregamos el enlace

50
00:06:13,150 --> 00:06:24,260
y vamos viendo como lo específico a lo más general y luego tenemos lo agregamos al menú y en este caso

51
00:06:24,260 --> 00:06:35,980
ponemos enlaces Aibar en la posición cero punto a Chile y le damos que queremos que se agregue la nueva

52
00:06:35,980 --> 00:06:42,150
lista guardó cambios en el cargo y vemos que aparece el enlace 6

53
00:06:46,780 --> 00:06:56,990
vemos que no tiene nada el HR-V no tiene nada aquí es donde he creado el enlace le podría poner un nuevo

54
00:06:56,990 --> 00:07:05,510
enlace con todos Zet atributo y esto tal vez donde está sacando el Z puedes dar click aquí en Element

55
00:07:05,590 --> 00:07:12,920
no y ahí usa un método que se llama Zet atributo y puedes ver que dice que será.

56
00:07:13,240 --> 00:07:17,710
Puedes agregar un valor a los nodos atributos.

57
00:07:17,870 --> 00:07:25,350
El primero es el atributo y luego el valor del atributo aquí lo va a poner en el signo de gato y recargo

58
00:07:25,900 --> 00:07:33,410
y si aparece la manita puedo inspeccionar aquí y vemos que aparece HR-V y viene el signo de gato.

59
00:07:33,430 --> 00:07:42,420
Si por ejemplo aquí le pusiera HTTP 2 puntos Diagonal Diagonal Google.com recargo y vemos que aparece

60
00:07:42,420 --> 00:07:53,250
Google.com así que si puedes ir creando elementos en tus interfaces se que es un poco complicado sin

61
00:07:53,250 --> 00:07:59,660
embargo pues es la forma de hacerlo en JavaScript pero una vez que lo entiendas esta forma de trabajo

62
00:07:59,660 --> 00:08:04,760
la verdad te darás cuenta que es muy sencillo hacerlo y muy poderoso sobre todo porque hoy en día la

63
00:08:04,760 --> 00:08:11,540
mayoría de las interfaces de los frameworks modernos de lo que se pide hoy en día realizar se pide que

64
00:08:11,540 --> 00:08:21,190
sea de esta forma ya que las interfaces hechas en JavaScript son más ligeras para el navegador que es

65
00:08:21,200 --> 00:08:21,850
imprimieran.

66
00:08:21,860 --> 00:08:23,450
Todo esto utilizando

67
00:08:26,930 --> 00:08:35,240
un lenguaje como PHP o Java o algo así las interfaces con JavaScript son el futuro.