Question

亲爱的StackOverflow之友，我需要通过Javascript将以下HTML标记条目创建到定义列表“DL”，以便我可以动态地创建条目。还需要编辑CSS值。我将把HTML条目放在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>

“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;
}

Answer 1

不完全相同的样式输出。可以保留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更具响应性。

使用Javascript（Dt和DD的复杂DL条目）创建此HTML标记

1 个答案: