如何在点击时将按钮的名称属性及其对应的价格输出到新的div中

<button id="myButton" name="按钮名称" data-price="价格">点击按钮</button>
<div id="outputDiv"></div>

var button = document.getElementById("myButton");
var outputDiv = document.getElementById("outputDiv");

button.addEventListener("click", function() {
  // 在点击时获取按钮的名称属性和价格属性
  var name = button.getAttribute("name");
  var price = button.getAttribute("data-price");

  // 创建一个新的文本节点，包含按钮的名称属性和价格属性
  var textNode = document.createTextNode(name + " - 价格：" + price);

  // 清空输出div中的内容
  outputDiv.innerHTML = "";

  // 将文本节点添加到输出div中
  outputDiv.appendChild(textNode);
});