В случае, если вы хотите, чтобы текст кнопки учитывался при каждом нажатии, просто используйте внутренний атрибут HTML кнопки и добавьте его к себе:
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
var btn = document.createElement("BUTTON");
var t = document.createTextNode('0');
btn.appendChild(t);
btn.onclick = function() {
btn.textContent = (+btn.innerHTML) + 1;
};
document.body.appendChild(btn);
}
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
В случае, если вы хотите добавить весь компонент с <p>
в качестве счетчика, обратите внимание, что я удаляю компонент и добавляю кнопку, после нажатия на которую он будет генерировать новый контейнерный div вместе с тегом counter <button>
и <p>
, который содержит значение счетчика:
function clickME() {
var container = document.createElement("div");
var btn = document.createElement("button");
var btnText = document.createTextNode('Click me');
btn.appendChild(btnText);
var pTag = document.createElement("p");
pTag.innerHTML = 'Clicks: ';
var aTag = document.createElement("a");
aTag.textContent = '0';
pTag.appendChild(aTag);
btn.onclick = function() {
aTag.innerHTML = (+aTag.innerHTML) + 1;
};
container.appendChild(btn);
container.appendChild(pTag);
document.body.appendChild(container);
}
<button id="add-counter" onclick="clickME()">add counter</button>