javascriptでhtml imgタグを返します。

私はバニラのjavascriptで私のgithubプロファイルを表示している簡単なプロジェクトをやっています。javascriptでhtml imgタグを返します。

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のイムのnoobを学習

イム。 MDNのエクササイズをしています：/

出典

2017-05-27 Fidel Castro

イメージソースを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>

出典

2017-05-27 02:52:59 Tomanow

おかげでチームメイト！それは動作します：D –

喜んでそれが助け！コーディングメイトと幸運を祈る！ – Tomanow

javascriptでhtml imgタグを返します。

答えて

関連する問題