Написал сайт и теперь нужно создать для него радио, проблема в том, что сделать это нужно с помощью js (очень много радиостанций, а излишние страницы под каждый тип не нужен, громоздко).
Делаю поэтапно, пока пытаюсь вставить содержимое в один блок который создается. Такой блок планируется поместить в функцию с 3-мя параметрами
1 - название радио
2 - ссылка на радио
3 - ссылка на картинку
Помогите сделать так, чтобы в созданный блок помещалось описание, картинка, при клике на которую срабатывает ссылка (радио включается).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#list {
list-style-type: none;
display: block;
}
</style>
</head>
<body>
<div class="radio-playlist">
<ul id="list">
<li><script src="css/radio_anime.js"></script></li>
<li><script src="css/radio_anime.js"></script></li>
<li><script src="css/radio_anime.js"></script></li>
<li><script src="css/radio_anime.js"></script></li>
</ul>
<!--
не знаю как сделать так, чтобы он запустил скрипт без имени.
так будет выглядеть скрипт в коде.
радиостанции выстраиваются одна за другой и линию.
-->
<script >
var parent = document.getElementsByClassName('radio-playlist')[0]; //получаем ссылку на элемент body
var elem_div = document.createElement('div');// создаст элемент div
//var new_element = document.createElement('p')
var node_img = this.document.createElement("img");
var node_a = this.document.createElement("a");
//elem_div.className = 'my-class'
elem_div.id = 'radio_anime'
elem_div.style.width = '100px';
elem_div.style.height = '100px';
elem_div.style.background = '#c5c5c5';
elem_div.style.border = '1px solid gray';
elem_div.style.position = 'relative';
elem_div.style.float = 'left';
elem_div.style.margin = '10px';
//new_element.innerHTML = "radio2";
//new_element.style.textAlign= "center";
node_img.src = "svet.png";
node_a.innerHTML = "radio2";
node_a.href = "#";
*!*
this.parent.appendChild(elem_div); // вставляем элемент div
//this.parent.appendChild(new_element);
this.document.getElementById("radio_anime").appendChild(node_img);
this.document.getElementById("radio_anime").appendChild(node_a);
/*
this.document.getElementById('my').innerHTML =this.document.getElementById("radio_anime").appendChild(node_a) + this.document.getElementById("radio_anime").appendChild(node_img);
*/
*/!*
</script>
</body>
</html>
var parent = document.getElementsByClassName('radio-playlist')[0]; //получаем ссылку на элемент body
var elem_div = document.createElement('div');// создаст элемент div
//var new_element = document.createElement('p')
var node_img = this.document.createElement("img");
var node_a = this.document.createElement("a");
//elem_div.className = 'my-class'
elem_div.id = 'radio_anime'
elem_div.style.width = '100px';
elem_div.style.height = '100px';
elem_div.style.background = '#c5c5c5';
elem_div.style.border = '1px solid gray';
elem_div.style.position = 'relative';
elem_div.style.float = 'left';
elem_div.style.margin = '10px';
//new_element.innerHTML = "radio2";
//new_element.style.textAlign= "center";
node_img.src = "svet.png";
node_a.innerHTML = "radio2";
node_a.href = "#";
*!*
this.parent.appendChild(elem_div); // вставляем элемент div
//this.parent.appendChild(new_element);
this.document.getElementById("radio_anime").appendChild(node_img);
this.document.getElementById("radio_anime").appendChild(node_a);
/*
Этот код не работает, по отдельности вставляет без проблем,
но как поместить в один созданный блок?
this.document.getElementById('my').innerHTML =this.document.getElementById("radio_anime").appendChild(node_a) + this.document.getElementById("radio_anime").appendChild(node_img);
*/
*/!*
