Как добавить кнопку в класс div при загрузке из Javascript?

Question

Для задания я не могу коснуться HTML-кода и редактирую внешний файл JS. Я должен отослать код к существующему классу и превратить его в кнопку для запуска скрипта.

Необходимо запустить на нагрузке, чтобы преобразовать элемент с заданным id в кнопку, которая также может запустить функцию по нажатию.

Так скажем, у нас есть id="bar"как мне это сделать?

Мой код не работает вообще.

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

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

Answer 1

Обновленный Codepen

---

Я думаю, что это немного, что вам нужно

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 2

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

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

Там вы идете!

Answer 3

Почему бы вам просто не выполнить свой сценарий, когда DOM готов? Для этого

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

Answer 4

Не каждый элемент 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>

Answer 5

Вам просто нужна функция 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");
    });

});