Question

0

129

Views

Insert some structured custom HTML in DOM simply using JS

With JQuery i had this :

 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\">&times;</span>\n" +
          "  </button>\n" +
          "</div>"
     
 searchHeader.append(closeButton);

How to convert in 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\">&times;</span>\n" +
          "  </button>\n" +
          "</div>"          
 searchHeader.append(closeButton);

This insert the button as a string and appendChild required a node object

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

If you're working with vanilla js then why not just use innerHtml?

document.getElementById("block-amu-search-form__title").innerHTML = closeButton;

you can refer to it. Here

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T08:33:40.216Z

You're trying to append a string to an html element. you should do this instead

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\">&times;</span>\n" +
    "  </button>\n" +
    "</div>"
const buttonContainer = document.createElement('div');
buttonContainer.innerHTML = closeButton;
searchHeader.append(buttonContainer);

or just simply


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\">&times;</span>\n" +
    "  </button>\n" +
    "</div>"
searchHeader.innerHTML = searchHeader.innerHTML + closeButton;

0

129

Insert some structured custom HTML in DOM simply using JS

2 answers

0

0

Find remote jobs

Andres GPT