在 JavaScript 中指定的按钮的 onclick 属性在 html 检查中不可见

Question

i have made a code where made a button named "Clear Cart" and passes it to the html code via javascript. I added the attribute 'onclick' on that button but when I inspect that button on page then button appears without 'onclick' attribute. All other attributes are appearing okay but 'onclick' attribute is not visible there. this is my code:

popStr = popStr + "<button id ='clearcart' class='btn btn-primary' onclick='clearCart()'> Clear Cart </button>";
document.getElementById('popcart').setAttribute('data-content', popStr);

This is the output I am receiving

<button id="clearcart" class="btn btn-primary"> Clear Cart </button>```

Answer 1

您用来注入新元素的库似乎对您的 html 进行了“清理”（删除了 onclick）。

Answer 2

Your question is not clear about how it is added to the DOM from data-content attribute. There should not be any problem if you are setting this HTML from data attribute to DOM with Element.innerHTML

Following is the sample code based on the assumptions:

let popStr = "";

popStr = popStr + "<button id ='clearcart' class='btn btn-primary' onclick='clearCart()'> Clear Cart </button>";

document.getElementById('popcart').setAttribute('data-content', popStr);

function addToDom() {
   document.querySelector("#output").innerHTML = document.getElementById('popcart').dataset.content;
}

function clearCart() {
  alert("working!")
}

Workign example: https://jsbin.com/tavoyozewa/edit?html,js,output