Форум

_marisha · #1 (**permalink**) 18.08.2021, 12:30

Доброго времени суток!
Необходимо c помощью js в div добавить другой div.
Как сейчас:

<div class="board">
      <div class="row__letter">
        <div class="cell__number">8</div>
        <div class="cell__number">7</div>
      </div>
      <div class="row" id="0">
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row" id="1">
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>

Как нужно (в конец .board добавить row__letter)

<div class="board">
      <div class="row__letter">
        <div class="cell__number">8</div>
        <div class="cell__number">7</div>
      </div>
      <div class="row" id="0">
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row" id="1">
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row__letter">
        <div class="cell__number">8</div>
        <div class="cell__number">7</div>
      </div>
    </div>

В начало row__letter добавлен след образом:

let board = document.querySelector('.board')
  let rowOne = document.createElement('div')
  rowOne.className = 'row__letter'
  board.append(rowOne)

В конец пытаюсь добавить так, но добавляет либо до первого row__letter, либо после него. А необходимо именно в конце board :

let rowEnd = document.createElement('div') //создаем новый элемент
  rowEnd.className = 'row__letter'
  board.prepend(rowEnd)//или append

Aetae · #2 (**permalink**) 18.08.2021, 12:37

У тебя, очевидно, порядок вызовов где-то перепутан. append добавляет в конец, prepend в начало, никакой магии.
Просто row ты добавляешь уже после того как добавлены оба row__letter, и, очевидно, не между ними, а в конец.

P.S. id не может начинаться на цифру.

рони · #3 (**permalink**) 18.08.2021, 12:40

_marisha,
что не так?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">.row__letter {
        background-color: #FF0000;
        height: 5px;
    }

    </style>

    <script>
document.addEventListener( "DOMContentLoaded" , function() {
    let board = document.querySelector('.board');
    let rowOne = document.createElement('div');
    rowOne.className = 'row__letter';
    board.append(rowOne);
    let rowEnd = document.createElement('div');
    rowEnd.className = 'row__letter';
    board.prepend(rowEnd);

  });
    </script>
</head>

<body>
<div class="board">
            <div class="row" id="0">
                <div class="cell">0</div>
                <div class="cell">0</div>
            </div>
            <div class="row" id="1">
                <div class="cell">1</div>
                <div class="cell">1</div>
            </div>
</div>


</body>
</html>

_marisha · #4 (**permalink**) 18.08.2021, 12:51

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

У тебя, очевидно, порядок вызовов где-то перепутан. append добавляет в конец, prepend в начало, никакой магии.
Просто row ты добавляешь уже после того как добавлены оба row__letter, и, очевидно, не между ними, а в конец.

P.S. id не может начинаться на цифру.

- осталось сообразить каким в настройке порядка (видимо всё перепутано)

function сhessBoard() {
  let board = document.querySelector('.board')

  let row //строка
  let cell //столбец

  let number = [8, 7, 6, 5, 4, 3, 2, 1]
  let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

  //добавление первой строки
  let rowOne = document.createElement('div')
  rowOne.className = 'row__letter'
  board.append(rowOne)

  //добавление последней строки
  let rowEnd = document.createElement('div')
  rowEnd.className = 'row__letter'
  board.prepend(rowEnd)

  for (let i = 0; i < 8; i++) {
    //создание дива в строке
    row = document.createElement('div')
    row.className = 'row'
    row.id = 'x' + i

    //добавление в первую строку ячеек
    let cellNumber = document.createElement('div')
    cellNumber.className = 'cell__number'
    cellNumber.innerText = number[i]

    board.append(row)
    rowOne.append(cellNumber)

    for (let j = 0; j < 8; j++) {
      cell = document.createElement('div')

      cell.className = 'cell'

      row.append(cell)
    }
  }
}
сhessBoard()

По поводу id - спасибо, скорректировано

рони · #5 (**permalink**) 18.08.2021, 12:57

_marisha,
что хотим сделать?

_marisha · #6 (**permalink**) 18.08.2021, 13:01

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

_marisha,
что хотим сделать?

- спасибо что откликнулись

Пытаюсь на шахматной доске вывести по краям цифры и буквы

рони · #7 (**permalink**) 18.08.2021, 13:36

_marisha,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .board {
            margin: 0;
            padding: 0;
        }

        .row {
            display: flex;
            margin: 0;
            padding: 0;
        }

        .row>div {
            height: 15px;
            width: 15px;
            box-sizing: border-box;
            text-align: center;
        }

        .row .cell {
            border: 1px solid#FF0000;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            function сhessBoard() {
                let board = document.querySelector('.board');

                let row;
                let cell;

                let number = [8, 7, 6, 5, 4, 3, 2, 1];
                let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

                let div = document.createElement('div');
                number.forEach(num => {
                    row = div.cloneNode();
                    row.className = 'row';
                    cell = div.cloneNode();
                    cell.textContent = num;
                    cell.className = 'cell__number';
                    row.append(cell)
                    cell = alphabet.map(_ => (cell = div.cloneNode(), cell.className = 'cell', cell));
                    row.append(...cell);
                    board.append(row)
                })
                row = div.cloneNode();
                row.className = 'row';
                cell = div.cloneNode();
                row.append(cell)
                cell = alphabet.map(letter => (cell = div.cloneNode(), cell.className = 'cell__letter', cell.textContent = letter, cell));
                row.append(...cell);
                board.append(row)
            }
            сhessBoard()
        });
    </script>
</head>

<body>
    <div class="board"></div>
</body>

</html>

voraa · #8 (**permalink**) 18.08.2021, 14:56

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
    .row, .row_letter {
       display: flex;
     }
  
    .row>div, .row_letter>div {
        box-sizing: border-box;
        height : 30px;
        width: 30px;
        text-align: center;
    }
     .cell {
        border: 1px solid black;
    </style>
 
    <script>
document.addEventListener( "DOMContentLoaded" , function() {

function сhessBoard() {
  let board = document.querySelector('.board')
 
  let number = [8, 7, 6, 5, 4, 3, 2, 1]
  let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
  
 // Создаем строку с буквами
 
  let rowLet = document.createElement('div')
  rowLet.className = 'row_letter'
  let d = document.createElement('div');
  rowLet.append (d)
  alphabet.forEach(l => {
    let dc = d.cloneNode();
    dc.textContent = l;
    rowLet.append(dc)
  })
  
  //добавление первой строки с буквами
  
  rowLet.append(d.cloneNode())
 
  board.append(rowLet)
  
  //  Создание строки ячеек
  
  let rowCell = document.createElement('div')
  rowCell.className = 'row';
  
  // Заполням строку ячеек
  
  let cell = document.createElement('div');
  cell.className = 'cell';
  for (let i = 0; i < 10; i++) rowCell.append(cell.cloneNode());
  rowCell.firstChild.className = rowCell.lastChild.className = 'cell_number';
 
 // Заполняем доску строками ячеек 
 
  number.forEach((n, i) => {
    let rw = rowCell.cloneNode(true);
    rw.firstChild.textContent = rw.lastChild.textContent = n;
    rw.id = 'x' + i;
    board.append(rw)   
  })
  
// Последняя строка с буквами
  board.append(rowLet.cloneNode(true))
}
сhessBoard()
})
</script>
</head>
<body>
<div class='board'>
</div>
</body>
<html>

SuperZen · #9 (**permalink**) 18.08.2021, 15:56

с автоплэй есть нюансы:

https://developer.chrome.com/blog/autoplay/

https://developer.mozilla.org/en-US/...feature_policy

_marisha · #10 (**permalink**) 18.08.2021, 16:19

voraa, Отличное решение, спасибо

Хотелось конечно разобраться, возможно ли подобное реализовать на приложенном мною коде, а то до Вашего примера еще далеко.

Форум

Справочник

Discord чат

Курсы javascript