Question

我正在尝试在当前元素上打印文本。我尝试了这两个代码，但它们似乎不起作用：

这是在整个文档中打印文本：

<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>

无法读取未定义的属性“ innerHTML”

Answer 1

将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>标签，因为它将是最新执行的脚本。

Answer 2

您可以使用document.writeln()在当前div内书写

<div>
  <script>
    fetch('file.txt').then((resp) => resp.text()).then(function(data) {
      document.writeln(data);
    });
  </script>
</div>

Hre是显示结果的类似示例。

<div>
  <script>
    Promise.resolve('abc123<br>xyz789')
    .then(function(data) {
      document.writeln(data)
    });
  </script>
</div>

Answer 3

首先，您应该将脚本移出div，然后用对目标div的引用替换代码中的“ this”。

如果将div的ID指定为“ target”，则可以执行以下操作：

const target = document.getElementById('target');

fetch('file.txt').then((resp) => resp.text()).then((data) => target.innerHTML = data);

如何更改当前元素的innerHTML？

3 个答案: