Posso utilizzare insertAdjacentHTML per inserire un elemento DOM

insertAdjacentHTML prevede 2 argomenti:

  • posizione ("beforebegin", "afterbegin", "beforeend", "afterend")
  • html (sarà convertito dal testo di DOM)

Posso passare elemento DOM come secondo argomento?

InformationsquelleAutor Yukulélé | 2014-06-28

 

3 Replies
  1. 14

    Per insertAdjacentHTML, la documentazione afferma chiaramente che il primo argomento deve essere di tipo stringa

    element.insertAdjacentHTML(position, text);

    position è la posizione relativa dell’elemento, e deve essere uno dei
    i seguenti stringhe:

    “beforebegin”, “afterbegin”, “beforeend”, “afterend”

    Non è molto chiaro su ciò che il secondo argomento può essere, ma i test dimostrano che il toString() viene eseguito internamente al secondo argomento, quindi la risposta è

    , è possibile nella maggior parte dei casi passa un elemento DOM come secondo argomento, ma la vera risposta è non, non sarà aggiunto alla pagina, invece, si ottiene solo la stringa

    [object HTMLDivElement]

    come un elemento DOM viene convertito in una stringa, e questo significa che la funzione si aspetta sempre il secondo argomento per essere un valido stringa di HTML, non un elemento DOM.

    Ecco un rapido test

    JS:

    var d1 = document.getElementById('one'); 
    
    var d3 = document.createElement('div');
    d3.innerHTML = 'three';
    
    d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
    
    d1.insertAdjacentHTML('afterend', d3);

    HTML:

    <div id="one">one</div>

    Ci sono altri metodi disponibili che sono molto più adatti per gli effettivi elementi del DOM, per esempio appendChild, insertBefore etc.

    Quale utilizzare dipende da dove l’elemento deve essere inserito ecc, ma l’inserimento nello stesso luogo, come le quattro opzioni disponibili in insertAdjacentHTML è possibile, e di solito non è molto difficile da fare.

    C’è anche Elemento .insertAdjacentElement() che funziona esattamente come insertAdjacentHTML, ma accetta un nodo DOM invece di una stringa di HTML.

    • Grazie per la risposta ma la mia domanda riguarda il secondo argomento.
    • Oh, va bene. Modificato la risposta
  2. 10

    Mentre non è possibile passare un elemento DOM direttamente, è possibile passare element.outerHTML per alimentare insertAdjacentHTML‘s secondo parametro con HTML rappresentazione in forma di stringa.

    Esempio:

    const parent = document.querySelector('.parent');
    const child = document.createElement('p');
    
    child.innerHTML = 'Awesome!';
    parent.insertAdjacentHTML('beforeend', child.outerHTML);
    
    //<div class="parent">
    //  <p>Awesome!</p>
    //</div>

Lascia un commento