<div>
<button onclick="c();">要素を追加する</button>
</div>
<div id="bar">
</div>

/* counters */

body {
  counter-reset: hoge;
}

p {
  counter-increment: hoge;
	margin:1px;
	
}
p::before {
  content:counter(hoge)'番目の';
}

button{position:fixed;left:150px;}
function c()
{
    var a = document.createElement("div");
    a.innerHTML = '<p>foo</p>';
    var b = document.getElementById("bar");
    b.appendChild(a);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.