用Javascript创建这个HTML标记(Dt和DD的复杂DL条目)
create this HTML markup with Javascript ( a complex DL entry of Dt and DD)
StackOverflow的朋友们:我需要通过Javascript将以下HTML标记条目添加到定义列表"DL",这样我就可以动态地创建该条目。还需要编辑CSS值。我将把CSS条目放在HTML之后。在dd条目中有一个类、一个带class的锚、一个href、一些文本、另一个带class的锚和一个href。我不知道通过Javascript输入这些的正确语法。非常感谢你的帮助。Markandeya
<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>
类"Book2"的CSS硬代码是:(需要语法来通过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
是一个数组,它被转换成一系列段落。这可能不是您想要的,但至少应该提供一个良好的运行开端。
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。
相关文章:
- 在Redux中,我应该在哪里编写复杂的异步流
- 将复杂对象从angular js传递到web api,它总是返回404
- dropdown.js中的复杂事件处理
- 您有更好的动态方式来缩短复杂的代码jquery吗
- 相当复杂的Regex
- 用Javascript重新格式化复杂文本日期字符串的更好方法
- 加速我的复杂函数绘图仪(canvas+javascript)
- JQuery Mobile Javascript复杂方程式
- 如何使用javascript过滤复杂的json对象
- 复杂量角器选择器
- JavaScript中的复杂字符串匹配
- 有关PouchDB的复杂startkey/endkey查询未返回预期结果
- 复杂的javascript函数,我该如何使用它
- TinyMCE:添加复杂格式
- 如何使用原型继承编写一个整洁灵活的复杂javascript应用程序
- 使用复杂数组时Jquery自动完成功能不起作用
- Selenium+js:匹配日期'dd Mmmm-yyyy'在字符串中
- 用javascript将日期格式从d/m/yyyy转换为yyyy-mm-dd
- 在Datepicker中将日期格式更改为yyyy-mm-dd
- 用Javascript创建这个HTML标记(Dt和DD的复杂DL条目)