やりたいこと
Javascriptで動的にDOM構造を作りたい
javascript
1 // a要素を生成し、href属性に値を付与 2 var a = document.createElement('a'); 3 var domain = "https://example.com"; 4 var aid = json.XXXXXXXXXX + "/"; 5 a.setAttribute("href", domain + aid); 6 7 // img要素を生成し、src属性に値を付与 8 var img = document.createElement('img'); 9 var imgUrl = json.AcmList[0].ImageUrl; 10 img.setAttribute("src", imgUrl); 11 12 // 他のDOMも生成 13 var top = document.createElement('div'); 14 var name = document.createElement('h3'); 15 var area = document.createElement('p'); 16 var button = document.createElement('button'); 17 var bottom = document.createElement('div'); 18 19 // 各要素にクラスを付与 20 a.className = "a-of-plugin"; 21 top.className = "top-of-plugin"; 22 img.className = "img-of-plugin"; 23 name.className = "name-of-plugin"; 24 area.className = "area-of-plugin"; 25 button.className = "button-of-plugin"; 26 bottom.className = "bottom-of-plugin"; 27 28 // 文字を挿入 29 name.innerHTML = json.XXXXXXXXXX; 30 area.innerHTML = json.XXXXXXXXXX; 31 button.innerHTML = "サンプルテキスト"; 32 33 //親子関係 34 top.appendChild(img); 35 bottom.appendChild(name); 36 bottom.appendChild(area); 37 bottom.appendChild(button); 38 a.appendChild(top); 39 a.appendChild(bottom); 40 document.getElementsByTagName("body")[0].appendChild(a); 41 42 // 配置 43 plugin.parentNode.insertBefore(button, plugin.nextSibling); 44 plugin.parentNode.insertBefore(area, plugin.nextSibling); 45 plugin.parentNode.insertBefore(name, plugin.nextSibling); 46 plugin.parentNode.insertBefore(img, plugin.nextSibling);
下記のようなDOM構造を動的に作りたい
html
1 <a class="a-of-plugin"> 2 <div class="top-of-plugin"> 3 <img class="img-of-plugin" /> 4 </div> 5 <div class="bottom-of-plugin"> 6 <h3 class="name-of-plugin"></h3> 7 <p class="area-of-plugin"></p> 8 <button class="button-of-plugin">サンプルテキスト</button> 9 </div> 10 </a>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/26 10:03