如何在从Javascript加载时向div类添加按钮？

对于作业，我不能触摸HTML代码并且正在编辑外部JS文件。我必须将代码引用到现有的类，并将其转换为运行脚本的按钮

必须在加载时运行，才能将具有给定

id

的元素转换为也可以在单击时运行函数的按钮

假设我们有

id=“bar”

， 我该怎么做呢

我的代码根本不起作用

document.getElementById("bar").onload = function () { myFunction() };

function myFunction() {
  document.getElementById("bar").innerHTML = "<button></button>";
}

document.getElementById（“bar”）.onload=function（）{myFunction（）}；
函数myFunction（）{
document.getElementById（“bar”）.innerHTML=“”；
}

为什么不在DOM就绪时执行脚本呢？为此,

document.addEventListener('DOMContentLoaded', function () { 
    document.getElementById("bar").innerHTML = "<button></button>";
}, false);

document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（“bar”）.innerHTML=“”；
}，假）；

---

我想这是你需要的

var bar = document.getElementById('bar');

window.onload = function() {
  var barInner = bar.innerHTML;
  bar.innerHTML = '<button>' + barInner + '</button>';
}

bar.onclick = function() {
  alert("Hello\nHow are you?");
};

var bar=document.getElementById（'bar'）；
window.onload=函数（）{
var barInner=bar.innerHTML；
bar.innerHTML=''+barInner+''；
}
bar.onclick=函数（）{
警报（“你好\n你好吗？”）；
};

您只需要一个createElement函数。 这项工作：

document.addEventListener("DOMContentLoaded", function(){
var button = document.createElement("button");
button.innerHTML = "This is a button";
// assuming the Div's ID is bar
var div = document.getElementById('bar');
div.appendChild(button);
//the following function will alert a window when the button is clicked
button.addEventListener ("click", function() {
    alert("Button was clicked");
    });

});

document.getElementById（“bar”）.onload=myFunction（）；
函数myFunction（）{
document.getElementById（“bar”）.innerHTML=“按钮”；
}

---

好了

并非每个HTML元素都有加载事件。 只有一些是相关的，例如窗口、图像。。。etc
看一看，了解更多关于这方面的信息

下面是一个简单的代码片段，解决了您提到的所有问题

window.addEventListener（“加载”，（）=>{
//您可以将整个脚本放在这里。
var elt=document.getElementById（“bar”），
按钮=document.createElement（“按钮”）；
button.textContent=elt.textContent；
button.onclick=回调；
elt.textContent=''；
elt.appendChild（按钮）；
函数回调（）{
log（“该按钮已被单击”）；
}
});
单击我
您需要使用getElementsByClassName（“bar”）。但我认为你应该在你的div中使用id而不是类。
document.getElementById("bar").onload = myFunction();

  function myFunction() {
    document.getElementById("bar").innerHTML = "<button>Button</button>";
  }