Con JQuery tuve esto:
let searchHeader= $(".block-amu-search-form__title"); let closeButton = "<div class=\"callout\" data-closable>\n" + " <button class=\"close-button\" aria-label=\"Close alert\" type=\"button\" data-close>\n" + " <span aria-hidden=\"true\">×</span>\n" + " </button>\n" + "</div>" searchHeader.append(closeButton);¿Cómo convertir en JS?
let searchHeader= document.querySelector(".block-amu-search-form__title"); let closeButton = "<div class=\"callout\" data-closable>\n" + " <button class=\"close-button\" aria-label=\"Close alert\" type=\"button\" data-close>\n" + " <span aria-hidden=\"true\">×</span>\n" + " </button>\n" + "</div>" searchHeader.append(closeButton);Esto inserta el botón como una cadena y appendChild requiere un objeto de nodo
Está intentando agregar una cadena a un elemento html. deberías hacer esto en su lugar
let searchHeader = document.querySelector(".block-amu-search-form__title"); let closeButton = "<div class=\"callout\" data-closable>\n" + " <button class=\"close-button\" aria-label=\"Close alert\" type=\"button\" data-close>\n" + " <span aria-hidden=\"true\">×</span>\n" + " </button>\n" + "</div>" const buttonContainer = document.createElement('div'); buttonContainer.innerHTML = closeButton; searchHeader.append(buttonContainer);o simplemente
let searchHeader = document.querySelector(".block-amu-search-form__title"); let closeButton = "<div class=\"callout\" data-closable>\n" + " <button class=\"close-button\" aria-label=\"Close alert\" type=\"button\" data-close>\n" + " <span aria-hidden=\"true\">×</span>\n" + " </button>\n" + "</div>" searchHeader.innerHTML = searchHeader.innerHTML + closeButton;