Adicionando elementos ao body do HTML

O objetivo deste documento é mostrar como o browser exibe dinâmicamente os elementos do body.
Temos 2 tipos de elementos que podem ser adicionados: a Div (que é block) e o Span (que é inline).
Os botões abaixo quando pressionados adicionam o elemento (appendChild) ao body do documento.

Pontos Importantes :
1-Elementos tipo bloco sempre ocupam a linha inteira do documento.
2-Antes de renderizar um elemento tipo bloco o browser verifica se esta no inicio da linha.
Se não estiver a renderização do elemento começará na próxima linha.
Sempre o elemento tipo bloco ocupara uma linha inteira.
3-Note que na mudança de exibição de um elemento tipo bloco para um tipo inline existe uma margem.


A partir da linha abaixo é o espaço livre do body para os botões acima.