Добавление div в конец div
Доброго времени суток!
Необходимо 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 |
У тебя, очевидно, порядок вызовов где-то перепутан. append добавляет в конец, prepend в начало, никакой магии.
Просто row ты добавляешь уже после того как добавлены оба row__letter, и, очевидно, не между ними, а в конец. P.S. id не может начинаться на цифру. |
_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> |
Цитата:
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 - спасибо, скорректировано :thanks: |
_marisha,
что хотим сделать? |
Цитата:
|
шахматная доска
_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> |
<!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> |
с автоплэй есть нюансы:
https://developer.chrome.com/blog/autoplay/ https://developer.mozilla.org/en-US/...feature_policy |
voraa, Отличное решение, спасибо :thanks:
Хотелось конечно разобраться, возможно ли подобное реализовать на приложенном мною коде, а то до Вашего примера еще далеко. |
Часовой пояс GMT +3, время: 22:15. |