Anexar html ao elemento de contêiner sem html interno

Às vezes, o desenvolvedor precisa adicionar vários elementos ao recipiente para diferentes fins. Além disso, eles podem querer anexar os elementos do contêiner que são utilizados principalmente para adicionar dados em um arquivo. Em tal situação, você pode adicionar personagens, boolean, cordas, números inteiros e carros alegóricos, aos dados em um programa usando JavaScript.

Este post explicará para anexar um elemento a um elemento de contêiner sem html interno.

Anexar html ao elemento de contêiner sem html interno

Para anexar o elemento de contêiner html sem html interno, o “documento.getElementById ()" e "insertadjacenthtml ()”Os métodos JavaScript são utilizados.

Siga o procedimento declarado para demonstração prática.

Etapa 1: Crie um contêiner "div"

Inicialmente, crie um contêiner "div" utilizando o "”Elemento e insira um atributo de classe dentro da tag de abertura da div.

Etapa 2: faça um botão

Então, use o “”Tag para criar um botão e adicionar o seguinte atributo dentro:

• O "tipo”Especifica o tipo do elemento. Para esse fim, o valor deste atributo é definido como “enviar”.
• ““ONCLICK”Handler permite que o usuário chame uma função e execute uma ação quando um elemento/botão é clicado. O valor de "OnClick" é definido como "addElement ()”.
• O "addElement ()”A função é utilizada com o objetivo de anexar um determinado filho/elemento no final do vetor, aumentando o comprimento do vetor.
• Em seguida, incorporar texto entre o “”Tag para exibir no botão.

Etapa 3: faça outra div e adicione dados

Então, utilize o “”Tag para fazer outra div e especificar um atributo de identificação para atribuir um ID específico ao elemento div. Adicione a etiqueta do parágrafo e defina os dados:

Elemento de anexo

Elemento 1

Elemento 2

Saída

Etapa 4: estilo “Div” contêiner

Agora, acesse o contêiner principal com a ajuda do nome da classe “.conteúdo principal”E aplique as propriedades CSS mencionadas no snippet abaixo:

.conteúdo principal
Alinhamento de texto: centro;
Margem: 30px 70px;
borda: 4px azul sólido;
preenchimento: 50px;
Antecedentes: RGB (247, 212, 205);

Aqui:

• ““alinhamento de texto”A propriedade é utilizada para definir o alinhamento do texto.
• ““margem”Aloca um espaço fora do limite definido.
• ““fronteira”Especifica um limite ao redor do elemento definido.
• ““preenchimento”Adicione espaço em branco dentro do elemento em um limite.
• ““fundo”Propriedade define uma cor na parte traseira do elemento.

Saída

Etapa 6: elemento do botão de estilo

Acesse o botão com seu nome e aplique as propriedades CSS listadas abaixo:

botão
Antecedentes: RGBA (84, 155, 214, 0.1);
borda: 3px RGB sólido (5, 75, 224);
Radio de fronteira: 6px;
Cor: RGB (6, 63, 250);
Transição: tudo .5s;
altura da linha: 50px;
Cursor: Ponteiro;
Esboço: Nenhum;
Size da fonte: 40px;
preenchimento: 0 20px;

De acordo com o snippet de código acima:

• Aplicar "fronteira" e "fundo”Cores no elemento do botão atribuindo os valores específicos.
• ““Radio de fronteira”A propriedade é utilizada para definir as curvas do botão em forma redonda.
• ““cor”Propriedade define uma cor para o texto adicionado dentro do elemento.
• ““transição”Fornece um método para controlar a velocidade de animação ao alterar as propriedades do CSS
• ““altura da linha”Propriedade define a altura de uma caixa de linha. É utilizado para definir a distância linhas internas do texto.
• ““cursor”É usado para alocar o cursor do mouse para exibir quando um ponteiro está acima de um elemento.
• ““contorno”É utilizado para adicionar/desenhar uma linha em torno de elementos, para destacar o elemento.
• ““tamanho da fonte”Especifica o tamanho específico do texto em um elemento.

Saída

Etapa 7: Aplique “: Passe o mouse” no botão

Acesse o elemento do botão junto com o “:flutuar”Pseudo-classe que é utilizada para selecionar elementos quando os usuários são utilizados sobre eles:

Botão: Hover
Cor: RGBA (255, 255, 255, 1);
Antecedentes: RGB (16, 17, 68);

Então, defina o “cor" e "fundo”Do botão aplicando essas propriedades.

Etapa 8: elemento de parágrafo de estilo

Acesse o parágrafo utilizando o “p”:

P
Size da fonte: 20px;
intensidade da fonte: Negrito;

Aqui, aplique o “tamanho da fonte" e "espessura da fonte”Propriedades.

Saída

Etapa 9: Anexar HTML ao elemento de contêiner

Para anexar o html ao elemento do contêiner, adicione o “”Tag e siga as instruções fornecidas:

• Inicialize uma variável como “ElementNumber”E atribua o valor a esta variável como“3”.
• Acesse a função com o nome “addElement ()”Isso é utilizado com o objetivo de anexar um determinado elemento no final do vetor, aumentando o comprimento/tamanho do vetor.
• Então, inicialize a variável “pai”
• O valor que "getElementById ()”Lide apenas um único nome de cada vez e retorna um nó em vez de uma variedade completa de nós
• Para um novo elemento, insira uma variável e atribua o valor como o elemento no “

  ”Tag junto com o número do elemento.

• O "insertadjacenthtml ()”O método é usado para adicionar código HTML em uma posição específica.
• Por último, "ElementNumber++”É utilizado para aumentar o elemento dentro do recipiente.

Pode -se observar que o elemento foi anexado ao elemento do contêiner de acordo com o clique:

Você aprendeu sobre o método mais fácil para anexar o HTML ao elemento do contêiner sem o html interno.

Conclusão

Para anexar o HTML ao elemento do contêiner sem html interno, o usuário pode utilizar a função JavaScript. Primeiro, inicialize uma variável como “ElementNumber"E valor"documento.getElementById ()”Suporta apenas um nome de cada vez e retorna apenas um único nó, não uma variedade de nós. Então, "insertadjacenthtml ()”O método insere o código HTML em uma posição especificada. Esta postagem é sobre anexar o HTML ao elemento de contêiner sem o HTML interno.