在按钮后但在新行中自动插入div

Question

我定义了一个按钮对象和一个div对象（demo），并使用它们编写了类似的内容

Usually the <button class=col>cat</button> is a domestic animal.
<div class=con>It is a small mammal.</div>
But it can also be a wild animal.

使用insertAdjacentHtml()可以自动添加div元素

var button = document.getElementsByClassName("col")[0];
button.insertAdjacentHTML("afterend", "<div class=con>It is a small mammal.</div>");

但是以这种方式，在按钮之后添加了div

Usually the <button class=col>cat</button><div class=con>It is a small mammal.</div> is a domestic animal.
But it can also be a wild animal.

是否有办法（javascript？）在包含按钮的行旁边的行中添加div？

Answer 1

如何使用代替呢？