Blog

JavaScript-createElementにてclass追加

w3-quarterクラスを指定したdivタグの中に、取得したAPIを表示させる(下の図参照)

[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の多対多の実装についても書いてみました。
参考にしてください。
随分とわかりやすくなりました。


一つ前の記事 サワディー辞書 タイ語
次の記事 測量くん2-SIMデータ取り込み