HTML DOM Element insertAdjacentHTML() -metodi

Määritelmä ja käyttö

insertAdjacentHTML() Metodi lisää HTML-koodin tiettyyn sijaintiin.

Sallitut sijainnit:

Arvo kuvaus
afterbegin Elementin alkua jälkeen (ensimmäinen lapsielementti).
afterend Elementin takana.
beforebegin Elementin edessä.
beforeend Elementin loppua ennen (viimeinen lapsielementti).

Esimerkki

Esimerkki 1

Lisää uusi <p> -elementti header-elementin jälkeen:

const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);

Kokeile itse

Esimerkki 2

Käytä "afterbegin":

let html = "<span style='color:red'>My span</span>"; h2.insertAdjacentHTML("afterbegin", html);

Kokeile itse

Esimerkki 3

Käytä "beforebegin":

h2.insertAdjacentHTML("beforebegin", html);

Kokeile itse

Esimerkki 4

Käytä "beforeend":

h2.insertAdjacentHTML("beforeend", html);

Kokeile itse

syntaksi

element.insertAdjacentHTML(position, html)

tai

node.insertAdjacentHTML(position, html)

parametrit

parametrit kuvaus
position

Välttämätön. Suhteellinen elementin sijainti:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
html lisättävä HTML.

selaimen tuki

Kaikki selaimet tukevat element.insertAjacentHTML():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki