如何在JavaScript的负载上为DIV类添加一个按钮

Question

对于分配，我无法触摸HTML代码，并且正在编辑外部JS文件。我必须将代码转介到现有类，然后将其转换为运行脚本的按钮。

必须在负载上运行以将给定的id转换为一个可以在单击时运行功能的按钮。

所以假设我们有id="bar"，我该如何处理？

我的代码根本不起作用。

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

Answer 1

为什么不准备就绪时执行脚本？为此，

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

Answer 2

您只需要一个创建函数。这有效：

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");
    });
});

Answer 3

更新了codepen

---

我认为这是您需要的

var bar = document.getElementById('bar');
window.onload = function() {
  var barInner = bar.innerHTML;
  bar.innerHTML = '<button>' + barInner + '</button>';
}
bar.onclick = function() {
  alert("HellonHow are you?");
};

Answer 4

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

你去！

Answer 5

并非每个HTML元素都有一个负载事件。只有其中一些是关注的，例如窗口，图像...等在这里查看MDN以了解有关此的更多信息。

这是一个简单的片段，可以解决您提到的所有内容。

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    button = document.createElement("button");
  
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  elt.textContent = '';
  elt.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div id="bar" style="background: beige; height: 2em">Click me</div>

---

在上一个片段中，我正在附加元素中的按钮。但是，如果此事确实是将其转换为按钮，我们就可以了：

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    container = elt.parentNode,
    button = document.createElement("button");
  
  button.id = elt.id; // if you want to keep the id
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  container.removeChild(elt);
  container.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div style="background: #fee; height: 2em">
  <div id="bar" style="background: beige; height: 2em">Click me</div>
</div>