通过加ajax()加载一段文本
## jq部分
var box = document.querySelector(".box");
$.ajax({
url:"https://api.apiopen.top/musicRankings" //获取api,
success: function (res) {
console.log(res.result[0]);
res.result.forEach(function (item) {
var div = document.createElement("div");
var h1 = document.createElement("h1");
var img = document.createElement("img");
var p = document.createElement("p");
div.setAttribute("class" , "item");
img.setAttribute("src" , item.bg_pic);
h1.innerText = item.name;
p.innerText = item.comment;
div.appendChild(img);
div.appendChild(h1);
div.appendChild(p);
for (var i = 0 ; i < item.content.length ; i++){
var div1 = document.createElement("div");
var span1 = document.createElement("span");
var span_img = document.createElement("img");
span_img.setAttribute("src" , item.content[i].pic_small);
span1.innerText = item.content[i].author + ":" + item.content[i].album_title;
div1.appendChild(span_img);
div1.appendChild(span1);
span_img.style.width = "20px";
div.appendChild(div1);
div1.style.marginLeft = "70px";
div1.style.marginTop = "20px";
}
p.style.whiteSpace = "nowrap";
p.style.overflow = "hidden";
p.style.textOverflow = "ellipsis";
p.style.marginLeft = "30px";
p.style.fontSize = "22px";
img.style.width = "400px";
div.style.backgroundColor = "#" + item.bg_color.split("x")[1];
div.style.color = "#" + item.color.split("x")[1];
div.style.width = "500px";
div.style.height ="400px";
div.style.cssFloat = "left";
div.style.margin = "50px";
box.appendChild(div);
})
}
}
)
# css部分
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>