在javascript中返回html img标签

菲德尔·卡斯特罗（Fidel Castro）

我正在做一个简单的项目，用香草javascript显示我的github个人资料。

let requestURL = 'https://api.github.com/users/fcfidel';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
    var githubInfo = request.response;
    populateHeader(githubInfo);
    //showGithubInfo(githubInfo);
}

function populateHeader(jsonObj) {
    var myH1 = document.createElement('h1');

    //myH1.textContent = jsonObj['login'];
    myH1.textContent = `<img src="${jsonObj['avatar_url']}" />`;
    image.appendChild(myH1);

    var myPara = document.createElement('p');
    myPara.textContent = 'Name: ' + jsonObj['name'] + ' // Formed: ' + jsonObj['created_at'];
   image.appendChild(myPara);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="main.js"></script>

</head>
<body>

<div class="image"></div>

<div class="name"></div>
<script>
    var image = document.querySelector('.image');
    var name = document.querySelector('.name');

</script>
</body>
</html>

我正在尝试找到一种方法来返回javascript中的内容，但我只是找不到一种方法:(

我找到一种方法的唯一方法是使用模板文字，它可以工作，但不是我想要的那样，它确实返回了我想要的东西，但是...

结果是：我知道解决方案确实很简单，但是我什至不能再没有其他...

这是我想要的结果：

我正在学习JavaScript我仍然很菜...我正在从MDN进行练习：/

托马诺

设置图像源，而不是将其添加到div。反引号也无济于事！

添加图像标签并修改ajax调用以使用：

document.querySelector('#my-image').src = jsonObj['avatar_url'];

let requestURL = 'https://api.github.com/users/fcfidel';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
  var githubInfo = request.response;
  populateHeader(githubInfo);
  //showGithubInfo(githubInfo);
}

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');

  //myH1.textContent = jsonObj['login'];
  //myH1.textContent = `<img src="${jsonObj['avatar_url']}" />`;
  //image.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Name: ' + jsonObj['name'] + ' // Formed: ' + jsonObj['created_at'];
  image.appendChild(myPara);
  
  document.querySelector('#my-image').src = jsonObj['avatar_url'];
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="application/javascript" src="main.js"></script>

</head>

<body>

  <div class="image">
  <img id="my-image" src="" />
  </div>

  <div class="name"></div>
  <script>
    var image = document.querySelector('.image');
    var name = document.querySelector('.name');
  </script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。