Como construir elementos html dinâmicos em javascript

Video: Como hacer un header dinamico con HTML, CSS y javascript

Um dos blocos de construção para criar efeitos especiais para qualquer página é a capacidade de fazer alterações HTML dinâmicos para a página. Por exemplo, você pode querer criar um efeito especial para o elemento selecionado como mostrado no exemplo a seguir.

Video: Parte 13 - Criando uma tabela HTML usando javascript (1a. Parte)

ChangeStyles function (event) {// obter uma referência para o element.var ThisElement = document.getElementById (event.currentTarget.id) - // Verifique o evento type.if (Event.type == "passe o rato por cima") {// Altere class.ThisElement.setAttribute CSS do elemento de destino ("classe", "Selecionado") -} else {ThisElement.setAttribute ("classe", "Normal") -}}

Este código aceita um evento como entrada. O código obtém uma referência para o elemento fornecido pela Evento objeto. Em seguida, verifica a tipo de evento propriedade para determinar que tipo de evento que aconteceu (ou um passe o rato por cima ou um mouseout). O tipo de evento determina que tipo de formatação do elemento usa.

É claro, seria útil para fornecer algum tipo de automação para atribuir um manipulador de eventos para o onmouseover e onmouseout eventos. O código a seguir executa essa tarefa para você:

Esta é uma outra variante de interagir com um grupo de elementos que utilizam o mesmo tag - o

Video: Trabalho Calculadora javascript - Part1

tag neste caso. O código obtém uma matriz desses elementos, chamando getElementsByTagName (). Em seguida, ele atribui o ChangeStyles () função para o onmouseover e onmouseout propriedades de cada elemento. O resultado é que cada

tag na página reage quando você passa o mouse sobre ele.