JSFiddle - React, Tailwind, and code Playground
HTML
<div class="banners__wrap-article" id='sk_wrap_82630'></div>
JavaScript
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('sk_wrap_82630').innerHTML = '<div class="banners__smi2"> \
<div class="banners__smi2__header"><span class="banners__smi2__header-text">Новости</span></div> \
' + cycleItems() + ' \
</div> \
<div class="banners__smi2"> \
<div class="banners__smi2__header"><span class="banners__smi2__header-text"></span></div> \
</div>';
}
}
function cycleItems(){
var items;
var massive = JSON.parse(xmlhttp.responseText);
for (var i = 0; i <= 3; i++) {
console.log(i);
console.log(massive.news[i].url);
console.log(massive.news[i].img);
console.log(massive.news[i].title);
console.log('---------');
items = items + constructItem(massive.news[i].url, massive.news[i].img, massive.news[i].title)
};
return items;
}
function constructItem(url, img, title){
var item;
return '<div class="banners__smi2__item"> \
<a href="' + url + '" class="banners__smi2__link"> \
<img class="banners__smi2__img" src="' + img + '" alt="" /> \
<span class="banners__smi2__title">' + title + '</span>...