Question

我有一个用于列表的html标记

<ul>
    <a id="catalogPlaceholder"></a> <!-- this is the placeholder to append new items -->

    <a class="sidebarListItem" href="#link">        
        <object type="deleteLinkOnHover"><a class="deleteItem" href="javascript:deleteItemFromList()">Delete</a></object>
        <div style="width:30%;float:left; background: none"><img class="rounded-circle" src="#image" alt="Product image" width="100%"></div>
        <div style="float:left;padding-left:10px;width:60%;background: none"><strong class="text-muted d-block mb-2"><h5>#title</h5></strong></div>        
    </a>
    <a class="sidebarListItem" href="#link">        
        <object type="deleteLinkOnHover"><a class="deleteItem" href="javascript:deleteItemFromList()">Delete</a></object>
        <div style="width:30%;float:left; background: none"><img class="rounded-circle" src="#image" alt="Product image" width="100%"></div>
        <div style="float:left;padding-left:10px;width:60%;background: none"><strong class="text-muted d-block mb-2"><h5>#title</h5></strong></div>        
    </a>
    <a class="sidebarListItem" href="#link">        
        <object type="deleteLinkOnHover"><a class="deleteItem" href="javascript:deleteItemFromList()">Delete</a></object>
        <div style="width:30%;float:left; background: none"><img class="rounded-circle" src="#image" alt="Product image" width="100%"></div>
        <div style="float:left;padding-left:10px;width:60%;background: none"><strong class="text-muted d-block mb-2"><h5>#title</h5></strong></div>        
    </a>
</ul>

看起来像this image

并希望使用javascript这样添加新项

function relateNewCatalog(id, image, title) {
    var a = document.createElement('a');
    a.classname = "sidebarListItem";
    a.id = "sidebarItemCatalog-" + id;
    a.href = "../?module=catalogDetails&idcatalog=" + id;
    a.style = "padding:10px";

    var html = '<object type="deleteLinkOnHover"><a class="deleteItem" href="javascript:deleteItemFromList(\'sidebarItemCatalog-' + id +  '\')">Delete</a></object>';
    html += '<div style="width:30%;float:left; background: none"><img class="rounded-circle" src="../uploads/images/' + image + '" alt="Product image" width="100%"></div>';
    html += '<div style="float:left;padding-left:10px;width:60%;background: none"><strong class="text-muted d-block mb-2"><h5>' + title + '</h5></strong></div>';        

    a.innerHTML = html;
    var placeholder = document.getElementById("catalogPlaceholder");
    placeholder.append(a);
}

但是，当我像在this image中那样操作时，标记似乎已损坏（请参见填充和悬停效果）。我尝试了clear:both，也尝试了insertBefore而不是appendChild，但是没有成功。我添加的项目越多，它们堆积得越多，如last image

感谢您的时间！

致编辑者对不起，我们拒绝编辑，但它基本上是错误的。仅当以下单词以a，e，i，o或u开头且“ HTML”不是开头时，才使用“ an”！

Answer 1

您可以使用<template>并分离数据并按以下方式查看

let data = [
  { id: 1, title: 'Product 1', image: "https://picsum.photos/id/10/50" },
  { id: 2, title: 'Product 2', image: "https://picsum.photos/id/20/50" },
  { id: 3, title: 'Product 3', image: "https://picsum.photos/id/30/50" }
]

function refresh() {
  let r='', inj = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);
  for(let it of data) r += inj(item.innerHTML,it);
  catalogPlaceholder.innerHTML = r;
}

function relateNewCatalog() {
  data.unshift({
    id: Math.max(...data.map(x=>x.id),0)+1, 
    title: `Product ${data.length+1}`, 
    image: `https://picsum.photos/id/${Math.random()*300|0}/50` 
  });
  refresh();
}

function deleteItemFromList(id) {
  data = data.filter(x=> x.id!=id);
  refresh();
}

refresh();

.sidebarListItem {display: flex}
h5 {margin:0}

<button onclick="relateNewCatalog()">Add</button>
<ul id="catalogPlaceholder" ></ul>

<template id="item" >
  <li>
    <a class="sidebarListItem" href="#link">        
      <object type="deleteLinkOnHover">
        <a class="deleteItem" onclick="deleteItemFromList(${id})">Delete</a>
      </object>
      <div class="imgBox">
        <img class="rounded-circle" src="${image}" alt="Product image" >
      </div>
      <div class="titleBox"><strong class="text-muted d-block mb-2">
        <h5>${title}</h5>
      </strong></div>        
    </a>
  </li>
</template>

动态附加内容（包括嵌入式javascript和样式）时出现问题

1 个答案: