createElement にてclass追加

やりたいこと

 

 

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);

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です