[spacer]
普通に考えると、新しいdivを作成
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);アタリマエのことだけど、時間つかってしまった。
今度はjQuery使ったコードも記載してみたいと思います
この本良さそう。主にデザインだね
Railsの多対多の実装についても書いてみました。
参考にしてください。
随分とわかりやすくなりました。
