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

JavaScript-createElementにてclass追加

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

 

Connect