logo

Select Sidearea

Populate the sidearea with useful widgets. It’s simple to add images, categories, latest post, social media icon links, tag clouds, and more.
hello@youremail.com
+1234567890

5月 2018

[vc_row][vc_column][vc_column_text]やりたいこと w3-quarterクラスを指定したdivタグの中に、取得したAPIを表示させる. 新しいdviを作成 var newDiv = document.createElement('div'); クラス名を指定。ここが無くて結構考えた. 当初、addClassを使っていたのが間違い。 当然ながら,JavaScriptにjQueryメソッドを利用しない。   newDiv.className = 'w3-quarter'; //取得したAPIを詰め込む var content = "" content += "<h3>" + data.items[i].volumeInfo.title + "</h3>"; content += "<h5>" + data.items[i].volumeInfo.authors + "</h5>"; content += "<h5>" + data.items[i].volumeInfo.publishedDate + "</h5>"; content += "<p>" + data.items[i].volumeInfo.description + "</p>"; content += "<img src='" + data.items[i].volumeInfo.imageLinks.smallThumbnail + "'>"; contentをinnerHTMLメソッドにより追加 newDiv.innerHTML = content; // htmlのDOM に新しく作られた要素とその内容を追加します var currentDiv = document.getElementById("results"); 現在のdivにappendChildすることにより、子要素になり、追加できる。 currentDiv.appendChild(newDiv);   参考サイト https://developer.mozilla.org/ja/docs/Web/API/Document/createElement これが違っていたので、手こずりました。 ここでインスタンス生成すると、親要素は追加できないとエラー! 現在要素を取得して追加する事! // var newContent = document.createTextNode(content); // newDiv.appendChild(newContent);   [/vc_column_text][/vc_column][/vc_row]...

Read More