DOM События в JavaScript. Создание объектов при действии

JavaScript, как создать объект при нажатии на кнопку

Первый документ типичный HTML документ, где расположены два div.

В  элементе div с классом section расположен div с индификатором container.

div с индификатором container — это кнопка. Стили .container1 сейчас не принадлежат ни какому объекту из файла HTML.

В конце HTML документа подключен документ содержащий JavaScript: <script src=»scripts.js»></script>

<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
		<div class="section">
		</div>
		<style>
			.container1{
				width: 100px;
				height: 100px;
				border: 1px #444444 solid;
			}

		</style>

	<div id="container">
			<button id="myLink">КНОПКА</button> 

	</div>
	<script src="scripts.js"></script>

</body>
</html>

В файле scripts.js

 

		// Вставка элемента метод
 	myLink.addEventListener('click', () => {
 		setTimeout(() => {
 		section.insertBefore(myDiv, section.firstChild);//вставка элемента через 3 сек
		 // Скрипт генерации случайного цвета
		  	 	function randColor() {
		    var r = Math.floor(Math.random() * (256)),
		        g = Math.floor(Math.random() * (256)),
		        b = Math.floor(Math.random() * (256));
		    return '#' + r.toString(16) + g.toString(16) + b.toString(16);
		} console.log(randColor());
 		},1000);
 	})

 	var myDiv = document.createElement('div');//создаем div
 	myDiv.innerHTML= '<div class="container1"></div>';//div с содержимом внутри
 	console.log(myDiv);
 	var section = document.querySelector('.section');

 

Возможно Вам будет интересно:  xPath запросы которые использую