Добавление 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, время: 15:31. |