Javascript-форум - Вывод div'ов

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вывод div'ов (https://javascript.ru/forum/dom-window/69417-vyvod-div%27ov.html)

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Первый сайт</title>
	<style>
		#b{
			height:100px;
			width:100px;
			background:grey;
			float:left;
			margin-right:2px;
		}
		#a{
			height:100px;
			width:100px;
			background:black;
			float:left;
			margin-right:2px;
		}
	</style>
</head>
<body>
	
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>

	<div id="b"></div>
	<script>
	var black = document.querySelectorAll('#a');
	var grey = document.querySelector('#b');
	var i = black.length;
	while (i--) {
		document.body.innerHTML += grey.outerHTML;
	}
	document.querySelectorAll('#b')[3].style.backgroundColor = "red";
</script>
</body>
</html>

так например, только советую все таки ID на класс сменить и создавать через .cloneNode или createElement

Igor710,
если нужен массив то массив и сделайте

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 0;
  var t = [];


  for(;i<black.length-1;i++){

  t[i] = grey.cloneNode(true);
  document.body.insertBefore(t[i],grey);
  console.log(t[i]);

  }
  t[i] = grey;
  t[0].classList.add('hide');
}
</script>
</body>
  </html>

Igor710, поздравляю вас с первым сайтом! ;)

Цитата:

Сообщение от рони (Сообщение 456108)

Igor710,
:-? возможно вы хотели так ...

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 1;
  var t;


  for(;i<black.length;i++){

  t = grey.cloneNode(true);
  document.body.insertBefore(t,grey);
  console.log(t);

  }
  grey.classList.add('hide');
}
</script>
</body>
  </html>

Не совсем так, мне хотелось бы чтобы к элементам нового созданного списка можно было обращаться по индексу, т.е точно так же как в переменной black. То есть когда я пишу black[2].classList.add('hide'), то третий элемент этого списка скрывается, но с новым списком grey так уже не получается, когда пишу grey.classList.add('hide'), скрывается почему то только последний элемент, а когда пытаюсь обратиться по индексу grey[2].classList.add('hide'), браузер не находит такого элемента.

Цитата:

Сообщение от j0hnik (Сообщение 456111)

Igor710, поздравляю вас с первым сайтом! ;)

Всмысле?)

Цитата:

Сообщение от Igor710

можно было обращаться по индексу

пост №12 массив t

Цитата:

Сообщение от Igor710 (Сообщение 456115)

Всмысле?)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>

Цитата:

Сообщение от j0hnik (Сообщение 456117)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>

Шаблонная заготовка :)

Цитата:

Сообщение от рони (Сообщение 456110)

Igor710,
если нужен массив то массив и сделайте

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 0;
  var t = [];


  for(;i<black.length-1;i++){

  t[i] = grey.cloneNode(true);
  document.body.insertBefore(t[i],grey);
  console.log(t[i]);

  }
  t[i] = grey;
  t[0].classList.add('hide');
}
</script>
</body>
  </html>

Спасибо, прошу прощения у участников обсуждения за этот вопрос)