Agregar html al elemento contenedor sin HTML interno

A veces, el desarrollador necesita agregar varios elementos al contenedor para diferentes fines. Además, es posible que deseen agregar los elementos del contenedor que se utilizan principalmente para agregar datos en un archivo. En tal situación, puede agregar caracteres, booleanos, cuerdas, enteros y flotadores, a los datos en un programa utilizando JavaScript.

Esta publicación explicará para agregar un elemento a un elemento contenedor sin HTML interno.

Agregar html al elemento contenedor sin HTML interno

Para agregar el elemento contenedor HTML sin HTML interno, el "documento.getElementById ()" y "insertadJacenthtml ()Se utilizan los métodos de JavaScript.

Siga el procedimiento establecido para una demostración práctica.

Paso 1: crear un contenedor "div"

Inicialmente, cree un contenedor "div" utilizando el "Elemento "e inserte un atributo de clase dentro de la etiqueta de apertura de div Div.

Paso 2: Haz un botón

Entonces, usa el ""Etiqueta para crear un botón y agregar el siguiente atributo dentro:

• El "tipo"Especifica el tipo de elemento. Para ese propósito, el valor de este atributo se establece como "entregar".
• "al hacer clic"Handler permite al usuario llamar a una función y realizar una acción cuando se hace clic en un elemento/botón. El valor de "OnClick" se establece como "addelement ()".
• El "addelement ()La función se utiliza con el fin de agregar un niño/elemento en particular al final del vector al mejorar la longitud del vector.
• A continuación, incruste el texto entre el ""Etiqueta para mostrar en el botón.

Paso 3: Haga otro DIV y agregue datos

Luego, utiliza el ""Etiqueta para hacer otro DIV y especificar un atributo de ID para asignar una ID particular al elemento DIV. Agregue la etiqueta del párrafo y defina los datos:

Anexo

Elemento 1

Elemento 2

Producción

Paso 4: contenedor de estilo "div"

Ahora, acceda al contenedor Div principal con la ayuda del nombre de la clase ".contenido principal"Y aplique las propiedades CSS mencionadas en el fragmento a continuación:

.contenido principal
Text-Align: Center;
margen: 30px 70px;
borde: 4px azul sólido;
relleno: 50px;
Antecedentes: RGB (247, 212, 205);

Aquí:

• "texto alineadoSe utiliza la propiedad para establecer la alineación del texto.
• "margen"Asigna un espacio fuera del límite definido.
• "borde"Especifica un límite alrededor del elemento definido.
• "relleno"Agregue espacio en blanco dentro del elemento en un límite.
• "fondo"La propiedad establece un color en la parte trasera del elemento.

Producción

Paso 6: elemento de botón de estilo

Acceda al botón con su nombre y aplique las propiedades CSS enumeradas a continuación:

botón
Antecedentes: RGBA (84, 155, 214, 0.1);
borde: 3px sólido RGB (5, 75, 224);
Border-Radius: 6px;
Color: RGB (6, 63, 250);
Transición: todos .5s;
Línea de altura: 50px;
cursor: puntero;
Esquema: ninguno;
tamaño de fuente: 40px;
relleno: 0 20px;

Según el fragmento de código anterior:

• Aplicar "borde" y "fondo"Colores en el elemento del botón asignando los valores específicos.
• "radio fronterizoSe utiliza la propiedad para configurar las curvas del botón en forma redonda.
• "colorLa propiedad define un color para el texto agregado dentro del elemento.
• "transición"Proporciona un método para controlar la velocidad de animación al cambiar las propiedades de CSS
• "altura de la líneaLa propiedad establece la altura de una caja de línea. Se utiliza para establecer la distancia dentro de las líneas de texto.
• "cursor"Se usa para asignar el cursor del mouse para mostrar cuándo un puntero está sobre un elemento.
• "describir"Se utiliza para agregar/dibujar una línea alrededor de los elementos, para hacer que el elemento se destaque.
• "tamaño de fuente"Especifica el tamaño particular para el texto en un elemento.

Producción

Paso 7: Aplicar ": Chover" en el botón

Acceda al elemento del botón junto con el ":flotar"Pseudo-Clase que se utiliza para seleccionar elementos cuando los usuarios mousan sobre ellos:

Botón: Hover
Color: RGBA (255, 255, 255, 1);
Antecedentes: RGB (16, 17, 68);

Luego, configure el "color" y "fondo"Del botón aplicando estas propiedades.

Paso 8: Elemento de párrafo de estilo

Acceda al párrafo utilizando el "pag":

pag
tamaño de fuente: 20px;
Font-Weight: Bold;

Aquí, aplique el "tamaño de fuente" y "pescado" propiedades.

Producción

Paso 9: Agregar html al elemento contenedor

Para agregar el HTML al elemento contenedor, agregue el ""Etiqueta y luego siga las instrucciones dadas:

• Inicializar una variable como "Elemento Number"Y asigne el valor a esta variable como"3".
• Acceda a la función con el nombre "addelement ()"Eso se utiliza con el propósito de agregar un elemento particular al final del vector mejorando la longitud/tamaño del vector.
• Luego, inicialice la variable "padre"
• El valor "getElementById ()"Solo maneje un solo nombre a la vez y devuelva un nodo en lugar de una matriz completa de nodos
• Para un nuevo elemento, inserte una variable y asigne el valor como elemento en el "

  "Etiqueta junto con el número de elemento.

• El "insertadJacenthtml ()El método se utiliza para agregar código HTML en una posición particular.
• Por último, "Elemento Number++"Se utiliza para aumentar el elemento dentro del contenedor.

Se puede observar que el elemento se ha agregado al elemento contenedor según el clic:

Has aprendido sobre el método más fácil para agregar el HTML al elemento contenedor sin el HTML interno.

Conclusión

Para agregar el HTML al elemento contenedor sin HTML interno, el usuario puede utilizar la función JavaScript. Primero, inicialice una variable como "Elemento Number"Y valor"documento.getElementById ()"Solo admite un nombre a la vez y solo devuelve un solo nodo, no una matriz de nodos. Entonces, "insertadJacenthtml ()"El método inserta el código HTML en una posición especificada. Esta publicación se trata de agregar el HTML al elemento contenedor sin el HTML interno.