Как изменить innerHTML текущего элемента?
Я пытаюсь напечатать текст на текущем элементе. Я попробовал эти два кода, но они, похоже, не работают:
Этот печатает текст во всем документе:
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.write(data);
});
</script>
</div>
В результате:
<html>
<body>
<!-- THE TEXT THAT I REQUESTED APPEARS HERE -->
</body>
</html>
И приведенный ниже код возвращает следующую ошибку:
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.this.innerHTML(data);
});
</script>
</div>
Cannot read property 'innerHTML' of undefined
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Замените this на body. innerHTML - это не функция, это свойство, которое вам нужно установить.
Я думаю, вы хотите добавить к <div>, в котором <script> мы присутствуем. Вы можете получить доступ к скрипту и получить его parentNode
<div>
<script>
const script = document.scripts[document.scripts.length - 1];
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
script.parentNode.innerHTML = data;
});
</script>
</div>
Примечание:document.scripts[document.scripts.length - 1] получит текущий тег <script>, потому что это будет последний выполненный скрипт.
Я думаю, он хочет записать это в текущий div... Это запишет в тело.
Как объяснялось выше, я хочу напечатать текст на текущем элементе, в данном случае это <div>, а не на <body>.
просто замените document.body на «селектор текущего div». В вашем примере HTML вы показываете, что хотите, чтобы он был добавлен непосредственно к телу.
@GetOffMyLawn Я обновил ответ. Я неправильно понял сначала.
Вы можете использовать document.writeln() для записи в текущем div
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.writeln(data);
});
</script>
</div>
Вот аналогичный пример, демонстрирующий результат.
<div>
<script>
Promise.resolve('abc123<br>xyz789')
.then(function(data) {
document.writeln(data)
});
</script>
</div>Сначала вы должны переместить скрипт из div, а затем заменить «это» в своем коде ссылкой на целевой div.
Если вы дадите своему div идентификатор «target», вы можете сделать следующее:
const target = document.getElementById('target');
fetch('file.txt').then((resp) => resp.text()).then((data) => target.innerHTML = data);
document.body.innerHTML = data;