为什么我在更改时在屏幕上而不是内容上得到 [object HTMLDivElement]<div> 使用innerHTML 的内容？</div><div id="text_translate"><p> 我正在尝试从<a href="https://jsonplaceholder.typicode.com/posts" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/posts</a>获取标题和正文数据，并尝试在屏幕上显示这些数据。只有标题应该是可点击的。下面是我的 HTML 代码。</p><pre> <.DOCTYPE html> <html> <head> <title>List</title> </head> <body> <div id="post"> <a> <h3 class="title"> </h3> </a> <p class="body"> </p> </div> <script src="fetch.js"></script> </body> </html></pre><p> 下面是我的 javascript 代码。</p><pre> const api_url='https://jsonplaceholder.typicode.com/posts'; async function getISS(){ const response = await fetch(api_url); const data= await response.json(); const { id, title, body } = data; document.getElementById("post").innerHTML = post; for (let i = 1; i < 100; i++) { post += `<a href="https://jsonplaceholder.typicode.com/posts/${i}"> <h3 class="title">${data[i].title}</h3></a> <p class="body">${data[i].body} </p>`; } } getISS();</pre><p> 当我运行此代码时，我会在屏幕上看到 [object HTMLDivElement]，如下所示： <a href="https://i.stack.imgur.com/G513L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G513L.png" alt="输出图片"></a></p><p> 我需要更改 javascript 代码上的 div 内容。我正在尝试使用innerHTML 来做到这一点。我究竟做错了什么？我需要查看内容而不是 [object HTMLDivElement]。我怎样才能做到这一点？</p></div>

Question

我正在尝试从https://jsonplaceholder.typicode.com/posts获取标题和正文数据，并尝试在屏幕上显示这些数据。 只有标题应该是可点击的。 下面是我的 HTML 代码。

<!DOCTYPE html>
<html>
    <head>
        <title>List</title>
    </head>
    <body>
        <div id="post">
            <a>
                <h3 class="title"> </h3>
            </a>
            <p class="body"> </p>
        </div>
        <script src="fetch.js"></script>
    </body> 
</html>

下面是我的 javascript 代码。

const api_url='https://jsonplaceholder.typicode.com/posts';

async function getISS(){
   const response = await fetch(api_url);
   const data= await response.json();
   const { id, title, body } = data;

   document.getElementById("post").innerHTML = post;

   for (let i = 1; i < 100; i++) { 
      post += `<a href="https://jsonplaceholder.typicode.com/posts/${i}">
      <h3 class="title">${data[i].title}</h3></a>
      <p class="body">${data[i].body} </p>`;
   }
}  

getISS();

当我运行此代码时，我会在屏幕上看到 [object HTMLDivElement]，如下所示：

我需要更改 javascript 代码上的 div 内容。 我正在尝试使用innerHTML 来做到这一点。 我究竟做错了什么？ 我需要查看内容而不是 [object HTMLDivElement]。 我怎样才能做到这一点？

Answer 1

这里有几点需要注意：

具有 ID 的元素在全局命名空间中获得该名称的条目。 因此，您<div id="post"></div>会产生一个名为post的全局变量。
您没有在 function 中声明局部变量post ，因此它使用指向元素的全局变量。
```
 document.getElementById("post").innerHTML = post;
```
因此，这一行将全局post （指向元素的那个）的序列化（字符串化）版本分配为您的内容，这就是您看到[object HTMLDivElement]的原因。

那么如何修复呢？

再说两件事：

声明一个局部变量post 。
仅在组装所有内容后设置<div>的内容。

async function getISS(){
   const response = await fetch(api_url);
   const data = await response.json();

   let post = '';
   for (let i = 1; i < 100; i++) { 
      post += `<a href="https://jsonplaceholder.typicode.com/posts/${i}">
      <h3 class="title">${data[i].title}</h3></a>
      <p class="body">${data[i].body} </p>`;
   }

   document.getElementById("post").innerHTML = post;
}

或者使用更现代的 JS（假设您实际上想要结果的第一个元素，上面的代码忽略了它）：

async function getISS(){
   const response = await fetch(api_url);
   const data = await response.json();

   document.getElementById("post").innerHTML = data
     .map( (el, ind) => `<a href="https://jsonplaceholder.typicode.com/posts/${ind}">
      <h3 class="title">${el.title}</h3></a>
      <p class="body">${el.body} </p>` )
     .join( '\n' );
}

问题描述

1 个解决方案

解决方案1
1 2022-08-21 08:46:21

问题描述

1 个解决方案

解决方案1 1 2022-08-21 08:46:21

解决方案1
1 2022-08-21 08:46:21