Javascript 当用户创建元素时，显示多个元素的outerHTML

我有一个JavaScript程序，每次按下按钮时都会创建一个元素
我使用：

我希望这样，当用户通过单击按钮创建元素时，它将生成元素的html代码或outerHTML。但是如果用户多次单击第一个按钮，我也希望它能这样做。这意味着我希望它为他们按下按钮时生成的每个元素生成外部html。为此，我使用：

    function CreateElement() { 

         var element = document.createElement("div");
         element.innerHTML = "hi"; 
         document.body.appendChild(element);

         var code = element.outerHTML;

    } 

但是，问题是，在变量“element”下创建了多个元素。所以我希望“code”变量包含所有元素的outerHTML。我试过：

function createElement() { 

         var code = element.outerHTML;
         code = code + element.outerHTML  //will add the outer html to the variable each time a new element is created

    } 

…但每次单击按钮生成元素时，它总是替换整个变量，而不是将outerhtml添加到变量中。我的目标是使变量“code”看起来像

“hi hi”

（作为字符串）

---

感谢您的帮助

将每个动态元素附加到单个容器中，然后使用该容器的

innerHTML

：

const container=document.querySelector（'.container'）；
const button=document.querySelector（'button'）；
函数createElement（）{
var元素=document.createElement（“div”）；
element.textContent=“hi”；
container.appendChild（元素）；
log（container.innerHTML）；
}
button.onclick=createElement
点击
将每个动态元素附加到单个容器中，然后获取该容器的
innerHTML
：


const container=document.querySelector（'.container'）；
const button=document.querySelector（'button'）；
函数createElement（）{
var元素=document.createElement（“div”）；
element.textContent=“hi”；
container.appendChild（元素）；
log（container.innerHTML）；
}
button.onclick=createElement
点击

function createElement() { 

         var code = element.outerHTML;
         code = code + element.outerHTML  //will add the outer html to the variable each time a new element is created

    }