Блог

Главная - Вопросы по программированию - вернуть html с помощью JS без document.append?

вернуть html с помощью JS без document.append?

#javascript #html #jquery

Вопрос:

Это моя функция для создания кнопки

 function createMp3Button(title, mp3Path) {
  let button = document.createElement("button")
  button.innerHTML = "click me"
  button.onclick = function () {
    ahk.ButtonOpenMp3(event, mp3Path)
    return false
  }
  return button
  // $(".results").append(button)
}

Я могу использовать Jquery и добавить кнопку в div/элемент или тело HTML-страницы, например. Однако, как мне просто вернуть кнопку и создать элемент везде, где я вызываю функцию?

Например, я несколько раз вызываю createMp3Button и, не беспокоясь о том, куда я вызываю div, могу ли я просто вызвать функцию и заставить ее создать кнопку, где я вызвал функцию JS?

В текущий момент верните только «кнопку», как в функции в данный момент, вместо этого я получу это

 [object HTMLButtonElement]

Комментарии:

1. Вы правильно возвращаете кнопку. Проблема в коде, который вызывает это. Ему нужно добавить кнопку в DOM, а не использовать ее в качестве строки.

2. Ваш код уже делает это. Он создает и возвращает элемент кнопки. То, что вы показываете, — это результат «toString ()», поэтому, что бы вы ни давали этой кнопке, это неправильно. Однако примечания к вашему коду: не используйте». innerHTML » для настройки текста, используйте .innerText . Кроме того, не используйте древний .onclick атрибут, зарегистрируйте вместо него обычный обработчик событий button.addEventListener("click", ...) . И этот обработчик событий не должен возвращаться false , который ничего не делал в течение многих лет =)

3. Вы могли бы использовать return button.outerHTML , но это приведет к потере прослушивателя событий, так как он не является частью HTML.

4. $(".results").append( createMp3Button("Some title", "https://example.com") )

5. Спасибо всем вам! Приношу извинения за то, что не добавил функцию, я добавлял ее, так как думал, что просто вызов функции с заданными параметрами правильно использует мою функцию. Наверное, я был слишком зациклен на том, что моя функция возвращалась неправильно, а не на том, «как» я вызывал функцию. Тай, ребята, это решило мою проблему. Ваше здоровье! @Mike’Pomax’Camermans , спасибо за вашу помощь и ваши предложения. Очень ценю ваши объяснения и помощь в улучшении моего кода. Ваше здоровье!

Метки: