Adicionar tags pelo console do navegador

[Márcio Incubus 0]

Olá pessoal, bom dia

 

Não sei se estou postando no lugar correto, pois minha dúvida é sobre comando dos consoles dos navegadores

 

Sou novo em Javascript e vi vários vídeos sobre fazer consultas no console do chrome

 

Porém precisava via console, criar por exemplo uma div em html nova ao invés de consultar as existentes

 

Também precisava via console, criar um estilo em css pra essa div em html

 

Pelo console do chrome existe como fazer esse tipo de inserção? É algum comando em Javascript? Ou nesse caso eu teria que inserir o HTML e o CSS pela aba "Elements"?

 

Abraços

[Ted k' 126]

Desculpa, mas porque no console? Só estudo mesmo?

[Márcio Incubus 0]

É um exercício que estou fazendo, também não vejo utilidade, mas foi pedido assim. Deve ser pra que aprenda os comandos em javascript de maneira mais profunda

[gabrieldarezzo 255]

Não faz o menor sentido o argumento de ser mais 'profundo'

haha

Já q o console do navegador é a mesma coisa de executar a pagina no navegador (pasmem) //Não em venham com papo de VM q vou bater em vcs

 

Mas respondendo seu primeira duvida.

Se no ambiente que você está

Tiver Jquery, e estar rodando no Google Chrome por exemplo.

Só ir no console e digitar alert(1);

 

Recomendo essa serie no YT do Google.

Ele fala bastante do Console.

 

https://www.youtube.com/playlist?list=PLOU2XLYxmsILUKyjDYUVYLeq7yyTxM_3d

 

EP 4:

[Kleber Rogério Duda 0]

A pergunta faz sentido e é completamente pertinente, pois alterar páginas já existentes "on the fly" é uma boa maneira de testar código css, html e javascript, de uma maneira rápida, e sem a necessidade de ide, editor de texto, e nem criação de arquivo, você cria, modifica e adiciona elementos e atributos no próprio browser, vê o resultado, e atualiza posteriormente o código de produção, caso o resultado lhe agrade.

Respondendo a pergunta:

Para acrescentar um elemento html, no chrome basta teclar F12, na guia "Elements" clicar com o botão direito no ponto do código que você deseja editar, um menu popup irá surgir, nele você clicará em Edit as html, após adicionar o elemento html, clique em qualquer ponto na tela fora do editor para sair do modo de edição, e logo em seguida selecione o elemento recém criado na própria guia "Elements", do lado direito na guia Styles aparecerá o código CSS do elemento selecionado, você pode editar o seletor element.style por exemplo e adicionar atributos para o elemento que você selecionou. Muito prático e rápido, excelente para testes e depuração.