Javascript 单击事件-每次单击时添加html元素-纯js

大家好，我可能有一个小问题，我不知道如何解决，我需要

onclick

事件，每次我单击它添加html代码，我不想使用

innerHTML

，因为它有风险，这是代码：

button.addEventListener('click',function () {
    const elements = `<div class="list-elem ${classList} data-id=${id}">
            <div class="to-do-date">
                <h3>${myDateString + ' ' + myTimeString}</h3>
            </div>
            <i class="fas fa-times" style="display: flex;"></i>
            <div class="to-do-topic">
                <h1>${topic.value}</h1>
            </div>
            <div class="to-do-text">
                <p>${textarea.value}</p>
            </div>
        </div>`
    toDoLists.appendChild(elements);
    id++
})

按钮。addEventListener（'click'，函数（）{
常量元素=`
${myDateString+''+myTimeString}
${topic.value}
${textarea.value}

`
toDoLists.appendChild（元素）；
身份证++
})

如果我使用

append（）

它的工作原理如下：

Append看起来像这样

如果使用appendChild（），则会出现以下错误：

TypeError:Node.appendChild的参数1不是对象

可能我很笨，而且修复方法很简单，不管怎样，我想在没有jquery的纯JS中实现它

我希望我能在这里得到帮助，谢谢：）

这是一个在元素后附加html的工作示例（包含大部分代码）：
（请参见我的代码中的注释）

//下面的代码是一个工作示例
var button=document.getElementById（“按钮”）；
var toDoLists=document.getElementById（“toDoLists”）；
变量id=1，
classList=“classList”，
myDateString=“xx/xx/xxxx”，
myTimeString=“hh:mm:ss”，
主题={
价值：“主题”
},
text区域={
值：“文本区域中的文本”
};
//在下面，您的代码被修改了
addEventListener（'click'，function（）{
//创建一个div并用所需的html填充它
var元素=document.createElement（“div”）；
elements.innerHTML=`
${myDateString+''+myTimeString}
${topic.value}
${textarea.value}

`;
toDoLists.appendChild（元素）；
//id++//禁用，因为例如固定值！
})

/*一些样式*/
.列表元素{
边框：1px纯色灰色；
}

是我，按钮



下面是待办事项列表：

我认为您必须使用

insertAdjacentHTML

函数，如下所示。阅读更多

var-button=document.getElementById（'btn'）；
var toDoLists=document.getElementById（'toDoLists'）；
变量id=1，
classList=“classList”，
myDateString=“2018年5月6日”，
myTimeString=“21:56:13”，
主题={
价值：13
},
text区域={
价值：131313
};
addEventListener（'click'，function（）{
常量元素=`
${myDateString+''+myTimeString}
${topic.value}
${textarea.value}

`
insertAdjacentHTML（'beforeend'，elements）；
id++；
});
点击我！
您使用的是appendchild，它将字符串添加为文本节点。看起来它是一个jquery对象try
toDoLists.get（-1）.appendchild（元素）
TypeError:toDoLists.get不是函数“我不想使用innerHTML，因为它有风险”，我不想使用innerHTML bro:（我有innerhtml的工作代码，但我不确定没有它是否有办法。@Mariusz，对不起，我错过了！这很好，但第二种方法也不安全：@Mariusz你可能不接受答案，并在你的问题中澄清这个“安全”问题。好吧，这真的很好，我不知道“insertAdjacentHTML（'beforeend'，elements）；”需要阅读它，使用安全吗？我更喜欢使用“代码> JS<代码>库和框架，而不是使用纯JS。我对这个函数了解不多。