javascript - 动态添加图像到列表元素

Question

我使用以下代码动态创建列表元素:

var entry = document.createElement('li');

entry.appendChild(document.createTextNode('Geralds Patta Inc.'+
'1249 Downing Street, Dallas, Tx, 75202, USA'));  
list.appendChild(entry);

我必须在此列表末尾添加一个图标，如图所示:

如何在列表末尾动态添加这些图标？

Answer 1

经过漫长而忙碌的搜索，找到了一个方法。希望这可以帮助。请go through this article on CSS custom variables或MDN Docs on CSS Custom variables .

注意:根据 MDN 文档，IE 不支持此方法。

使用 HTML 和 CSS:

#list > li:after
{
    content:"";
    background-image:var(--iconimg);
    background-size:cover;
    width:var(--iconwidth);
    height:10px;
    display:inline-block;
    margin-left:5px;
}

<ul style="--iconwidth:20px;" id="list">
    <li style="--iconimg:url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');">Test</li>
    <li style="--iconimg:url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');">Test</li>
    <li style="--iconimg:url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');">Test</li>
    <li style="--iconimg:url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');">Test</li>
    <li style="--iconimg:url('https://download.unsplash.com/photo-1420708392410-3c593b80d416');">Test</li>
</ul>

如果您正在使用，Font Awesome Icons

var faicons = ["calculator","calendar","calendar-check-o","calendar-minus-o","calendar-o","calendar-plus-o","calendar-times-o","camera","camera-retro","car","caret-square-o-down","caret-square-o-left"];

var elems = document.querySelectorAll("#fa > li");
elems.forEach(function(elem,index){
    elem.classList.add("fa");
    elem.classList.add("fa-"+faicons[index]);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<ul id="fa">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>

BootStrap Glyphicons

var bootstrapicons = ["asterisk","plus","eur","euro","minus","cloud","envelope","pencil","glass","music"]
var elems = document.querySelectorAll("#bs > li");
elems.forEach(function(elem,index){
    elem.classList.add("glyphicon");
    elem.classList.add("glyphicon-"+bootstrapicons[index]);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="bs">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>