Дорогие друзья StackOverflow, мне нужно сделать следующую запись разметки HTML в список определений "DL" через Javascript, чтобы я мог сделать запись динамически. Также необходимо отредактировать значения CSS. Я поместим запись CSS после HTML. В записи dd есть класс, якорь с классом, href, некоторый текст, другой якорь с классом и href. Я не знаю правильного синтаксиса для ввода этих Javascript. Большое спасибо за любую помощь. Маркандейа
<dt class="Book2"><span>Book2</span></dt>
<dd class="Book2"><a class="amazonLink" href="http://www.amazon.co.uk/Principles-Beautiful-Web-Design/dp/0975841963%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0975841963"><img src="http://ecx.images-amazon.com/images/I/41FxC9u%2B%2BVL._SL160_.jpg" alt=""></a><br>
<strong>Beautiful Web Design</strong> by Jason Beaird.<br>
This book teaches you a wide range of topics on how to make great web sites, covering layout styles, ratios and colour theory.<br>
<a class="publisherLink" href="#">Beautiful Web Design on SitePoint</a>
</dd>
CSS-код для класса "Book2": (нужен синтаксис для редактирования записей через Javascript)
dl.bookshelf dt.Book2 {
background: url(img/beautdesign-spine.png) 0 0 no-repeat,
url(img/beautdesign-front.png) 40px 0 no-repeat;
left:52px;
width:280px;
z-index:2;
}
Не совсем то же самое. Поле publisher
может быть остановлено, и изображение не требуется для ссылки на хранилище. Вы также можете установить класс из объекта JSON для ссылки в хранилище. desc
- это массив, который преобразуется в ряд абзацев. Это может быть не совсем то, что вы хотите, но это должно по крайней мере обеспечить хороший запуск.
Во-первых, Javascript:
var books = [
{
title: 'Beautiful Web Design',
author: 'Jason Beaird',
link: {
cls: 'amazonLink',
href: 'http://www.amazon.co.uk/Principles...',
img: 'http://ecx.images-amazon.com/images/...',
text: 'View on Amazon'
},
publisher: {
href: '#',
name: 'SitePoint'
},
desc: [
'This book teaches you...'
]
}
];
var bookshelf = document.getElementById('bookshelf');
for(var i=0,l=books.length;i<l;i++) {
var book = books[i];
var dt = document.createElement('dt');
var title = document.createElement('strong');
title.appendChild(document.createTextNode(book.title));
dt.appendChild(title);
dt.appendChild(document.createTextNode(' by ' + book.author));
var dd = document.createElement('dd');
if(book.link.href !== null) {
var link = document.createElement('a');
link.setAttribute('class',book.link.cls);
link.setAttribute('href',book.link.href);
if(book.link.img !== undefined && book.link.img !== null) {
var img = document.createElement('img');
img.setAttribute('src',book.link.url);
img.setAttribute('alt',book.link.text);
link.appendChild(img);
}
else {
link.appendChild(document.createTextNode(book.link.text));
}
dd.appendChild(link);
}
if(book.desc !== undefined && book.desc instanceof Array) {
for(var j=0,k=book.desc.length;j<k;j++) {
var p = document.createElement('p');
p.appendChild(document.createTextNode(book.desc[j]));
dd.appendChild(p);
}
}
if(book.publisher !== undefined) {
var pub = document.createElement('a');
pub.setAttribute('class','publisherLink');
pub.setAttribute('href',book.publisher.href);
pub.appendChild(document.createTextNode(book.title + ' on ' + book.publisher.name));
dd.appendChild(pub);
}
bookshelf.appendChild(dt);
bookshelf.appendChild(dd);
}
Затем вывод HTML:
<dl id="bookshelf">
<dt>
<strong>Beautiful Web Design</strong> by Jason Beaird
</dt>
<dd>
<a class="amazonLink" href="..."><img src="..." alt="View on Amazon"/></a>
<p>
This book teaches you...
</p>
<a class="publisherLink" href="#">Beautiful Web Design on SitePoint</a>
</dd>
</dl>
Вы, вероятно, можете добавить классы и элементы здесь или там, чтобы сделать полученный HTML более описательным и более отзывчивым к CSS.
doccument.createTextNode
document.createElement
,doccument.createTextNode
и.apendChild
? Если нет, исследуйте их и применяйте по мере необходимости.