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

我有一个列表的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>

#title
#title
#title

看起来像

并希望使用如下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);
} 

函数relateNewCatalog（id、图像、标题）{
var a=document.createElement（'a'）；
a、 classname=“sidebarListItem”；
a、 id=“sidebarItemCatalog-”+id；
a、 href=“../module=catalogDetails&idcatalog=“+id；
a、 style=“padding:10px”；
var html=''；
html+=''；
html+=''+title+'；
a、 innerHTML=html；
var placeholder=document.getElementById（“目录占位符”）；
占位符。追加（a）；
} 

但是当我在中这样做时，标记似乎被破坏了（请参见填充和悬停效果）。我尝试了

clear：既有
也有
insertBefore
而不是
appendChild
，但没有成功。我添加的项目越多，它们就越像在

谢谢你的时间

致编辑很抱歉，编辑被拒绝了，但基本上是错的。如果以下单词以a、e、i、o或u开头，而“HTML”不以a开头，则只能使用“an”
 您可以使用
并按如下方式分离数据和视图


let数据=[
{id:1，标题：“产品1”，图像：https://picsum.photos/id/10/50" },
{id:2，标题：“产品2”，图像：https://picsum.photos/id/20/50" },
{id:3，标题：“产品3”，图像：https://picsum.photos/id/30/50" }
]
函数刷新（）{
设r=''，inj=（str，obj）=>str.replace（/\${（.*）}/g，（x，g）=>obj[g]）；
for（让它的数据）r+=inj（item.innerHTML，it）；
catalogPlaceholder.innerHTML=r；
}
函数relateNewCatalog（）{
data.unshift({
id:Math.max（…data.map（x=>x.id），0）+1，
标题：`Product${data.length+1}`，
图片：`https://picsum.photos/id/${Math.random（）*300 | 0}/50`
});
刷新（）；
}
函数deleteItemFromList（id）{
data=data.filter（x=>x.id！=id）；
刷新（）；
}
刷新（）
.sidebarListItem{display:flex}
h5{边距：0}
添加



${title}


您正在将项目附加到第一个
标记。但是您应该将它们添加到
ul
标记中
id=catalogPlaceholder
应该选择
ul
。很好，现在标记是正确的，但是悬停效果仍然不起作用。有什么想法吗？看看
before（）
或
after（）
是否适合你。查看中函数的确切描述，以便找到最佳选择。“…但标记似乎已损坏…”
和
必须将
作为唯一的直接子代（te子代）。任何其他元素（如
）都是无效的HTML。不仅格式化出错，而且JavaScript/jQuery的DOM遍历也出错。将
更改为
，您将不会得到意外的结果。我知道，未经请求的编辑可能会很烦人，但我认为您对有关正确使用英语中“an”的语法规则不太了解，请参见此处：呈现得很好！不过，每次添加另一个目录时，您都在重建整个页面。当有大量目录要列出时，这可能会减慢页面速度或导致某些闪烁。因此，
.appendChild（）
可能是
innerHTML
的一个有用的替代方案？（@MBrain:use之前没有“an”；-）@cars100m你也知道为什么吗？因为在这种情况下，“a”与“可选”相关，而与“有用”无关。“另类”以誓言的声音开始。“a”是神秘的5个字母之一。但是，很好的尝试：P@cars10m您是对的-解决方案可以改进为不更改html树中的旧产品。顺便说一句，在过去我做了一些测试，它看起来比
.appendChild（）
-嗨@Kamil，关于速度比较的有趣事实。在未来的项目中，我们会记住这一点。今天早上你已经拿到我的+1了。我希望姆巴林不要对我的评论太生气，并会接受你的回答。；-）这不是我想要的，但我当然接受，无论如何谢谢你。现在我明白了，我的问题问得都不好。不知道你的评论@cars10m要怎么处理？！