How to add a button to a div class when loading from Javascript?

Question

For assignment, I cannot touch HTML code and edit an external JS file. I need to pass the code to an existing class and turn it into a button to run the script.

When loading, it is necessary to start the conversion of the element with the specified idbutton, which can also trigger the function when pressed.

So let's say we have id="bar"how to do this?

My code doesn't work at all.

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

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

Answer 1

Why don't you just execute your script since the DOM is ready? For this

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

Answer 2

Updated Codepen

---

I think this is the bit you need

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

Answer 3

createElement. :

document.addEventListener("DOMContentLoaded", function(){
var button = document.createElement("button");
button.innerHTML = "This is a button";
// assuming the Div 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 4

document.getElementById("bar").onload = myFunction();

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

!

Answer 5

Not every HTML element has a load event. Only some of them are affected, such as window, image ... etc.
Look here on MDN to learn more about this.

Here is a simple snippet resolving everything you mentioned.

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>

Run codeHide result

---

In the previous snippet, I add a button to the element. But if the question really turn it into a button, then we go:

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>

Run codeHide result