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>

Answer 2

最简单的方法是在CSS中为li元素添加：after 例如：

li:after{content:""; background:yourimage; width:15px; height:15px; display:inline-block; vertical-align:middle;}

如果要使用jQuery

您可以像这样调用方法

   function addIcon(entry, iconClass, iconHtml) {
       $('<i>', {
           'class': iconClass,
           'html': iconHtml
       }).appendTo(entry);
   }

如果您只有图像，请使用以下方法函数addIcon（entry，imgClass，src）{ $（''，{ 'class'：iconClass， 'src'：iconHtml }）。appendTo（entry）; }

var imgIcons = ["calculator.png","camera.png","camera-retro.png","car.png","caret-square-o-down.png"];

$("#fa li").each(function(index){

 
       $('<img>', {
           'class': 'img_class',
           'src': imgIcons[index]
       }).appendTo($(this));
 

});

function addDynamicallyTextIcon(text, icon, parent){

var container=$('<li>',{
    'html' : text
  }).appendTo(parent);
  ($('<img>', {
           'class': 'img_class',
           'src': icon
       })).appendTo(container)

}
addDynamicallyTextIcon( 'Geralds Patta Inc.'+
'1249 Downing Street, Dallas, Tx, 75202, USA','.../images/logo-jquery.png','#addimg_whenAddContent');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="fa">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>


<ul id="addimg_whenAddContent">
<li>Test1</li>
</ul>

Answer 3

在将fontawesome库添加到您的项目后，您是否应该尝试此操作

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

entry.appendChild(
   document.createTextNode(
      'Geralds Patta Inc.'+
      '1249 Downing Street, Dallas, Tx, 75202, USA' +
      '<i class="fa fa-facebook"></i>'
));

动态将图像添加到列表元素

3 个答案: