Вставка данных JSON с помощью «insertAdjacentElement» вместо «innerHTML»
Мне нужно использовать JSON для динамической загрузки данных на страницу.
Но я слышал, что innerHTML не защищён от XSS-атак, поэтому я предпочитаю всегда использовать textContent вместо него.
Для этого мне нужно добавить текстовые контейнеры с помощью insertAdjacentElement вместо того, чтобы помещать их в innerHTML = TEXT `, вот так.
Я пытался сделать это с помощью insertAdjacentElement, но проблема в том, что все элементы JSON помещаются в один текстовый контейнер.
Есть ли способ обернуть каждый Object.key тегами <> и </> без внутреннего HTML?
Большое спасибо.
ПРИМЕЧАНИЕ. Используйте (Ctrl + /) и (Alt + левую кнопку мыши), чтобы скрыть и отобразить каждый метод.
fetch("./b.json")
.then(function (response) {
return response.json();
})
.then(function (data) {
console.info(data);
const table = document.getElementById('data-input');
const tableRow = document.createElement('tr');
let th = document.createElement('th');
let td = document.createElement('td');
let textTitle = "";
let text = "";
for (let item of data) {
// Required Method: insertAdjacentElement();
table.insertAdjacentElement('afterbegin', tableRow);
tableRow.insertAdjacentElement('beforeend', th);
tableRow.insertAdjacentElement('beforeend', td);
th.textContent += `${item.SpecifiedSeries}`;
td.textContent += `
${item.Hero}
${item.Power}
`;
// Original Method: innerHTML;
// text += `
// <tr>
// <th>${item.SpecifiedSeries}</th>
// <td>${item.Hero}</td>
// <td>${item.Power}</td>
// </tr>
// `;
}
// Original Method: innerHTML;
// table.innerHTML = text;
});
// THE JSON FILE INCLUDED AS WELL:
// [
// {
// "SpecifiedSeries": "Gravity Falls",
// "Hero": "Dipper & Mabel",
// "Power": "Cleverness, Determination..."
// },
// {
// "SpecifiedSeries": "Legend of Korra",
// "Hero": "Avatar Korra",
// "Power": "Mastering all 4 Elements..."
// }
// ]#container {
position: fixed;
z-index: 600;
margin-top: 5%;
overflow-y: scroll;
left: 50%;
transform: translate(-50%);
bottom: 5%;
height: clamp(48%, 90%, 90%);
width: clamp(50%, 90%, 90%);
border-radius: 24px;
background-color: white;
text-align: center;
}
#container table {
margin-top: 5%;
}
table {
font-family: sans-serif;
width: 1400px;
margin: 30px auto;
box-shadow: 5px 10px 18px blue;
table-layout: fixed;
}
table th {
padding: 10px 0;
background-color: #f4f4f4;
border: thin solid #d4d4d4;
}
table td {
padding: 10px;
border: thin solid #d4d4d4;
text-align: center;
background-color: #fff;
}
table img {
width: 70%;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "a.css">
</head>
<body>
<div id = "container">
<table>
<thead>
<tr>
<th style = "background-color: blue;"></th>
<th>Hero</th>
<th>Power</th>
</tr>
</thead>
<tbody id = "data-input"></tbody>
</table>
</div>
<script src = "a.js"></script>
</body>
</html>Пожалуйста, измените свой фрагмент, чтобы он имитировал JSON вместо выборки, что, вероятно, сработает.
Спасибо за совет, но мне нужно знать, как это работает конкретно с InsertAdjacentElement, поскольку мне нужно, чтобы он работал с другими тегами, а также с таблицей. @Теему
Вы также должны поместить вызовы document.createElement внутри цикла for. В настоящее время вы присваиваете значение элементу, а затем присваиваете другое значение тому же элементу на следующей итерации цикла.
УХ ТЫ! Я думаю, что это самый короткий полезный ответ, который я когда-либо видел! Оно работает! Но есть одна проблема: данные вставляются в противоположном направлении (от последнего к первому). Как я могу это исправить? Большое спасибо! @Sjoertjuh
Я не знаю, какой у вас сейчас код, но думаю, что table.insertAdjacentElement('afterbegin', tableRow); следует использовать beforeend вместо afterbegin.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете изменить код на что-то вроде этого.
fetch("./b.json")
.then(function (response) {
return response.json();
})
.then(function (data) {
const table = document.getElementById('data-input');
data.forEach(function(item) {
// Create table row
const tableRow = document.createElement('tr');
// Create table cells (td)
const th = document.createElement('th');
const tdHero = document.createElement('td');
const tdPower = document.createElement('td');
// Set text content for each cell
th.textContent = item.SpecifiedSeries;
tdHero.textContent = item.Hero;
tdPower.textContent = item.Power;
// Append cells to the row
tableRow.appendChild(th);
tableRow.appendChild(tdHero);
tableRow.appendChild(tdPower);
// Append row to the table body
table.appendChild(tableRow);
});
})
.catch(function(error) {
console.info('Error fetching JSON: ', error);
});
Спасибо большое, все работает отлично!!
Просто вопрос: он должен работать и с циклом for of, верно?
@StuckOverflow Почему бы не попробовать?
Если вы хотите создать таблицу динамически, лучшим выбором будет HTMLTable API.