Wie man HTML auf Javascript oder jquery einfügt

Question

Hi ich brauche deine Hilfe Kerle im neue auf Javascript oder jquery im Versuch, einen HTML-Code innerhalb des Überlagerungselements hinzuzufügen, aber es arbeitet nicht im using $ ("Überlagerung") .append (" Hallo "); dieses aber seine Arbeit nicht

die js unten gibt, was im versucht zu Eingang im Inneren eine HTML-Code zu tun

init=()=>{ 
     //SELECT & BIND (CLICK) EVENT 
     document.querySelector('a.menuToggle, a#welcomeDivs').addEventListener('click',modal.overlay.init); 
    } 
    modal={ 
     overlay:{ 
      init:()=>{ 
       //CREATE OVERLAY 
       var overlay = document.createElement('overlay'); 
       overlay.id = 'welcomeDivsss'; 
       //SET (CLICK) EVENT TO REMOVE ITSLEF 
       overlay.addEventListener('click',modal.overlay.remove); 
      $("overlay").append("<strong>Hello</strong>"); 

       //APPEND TO INTERFACE 
       document.body.appendChild(overlay); 

      }, 
      remove:(e)=>{ 
       //REMOVE ITSELF 
       e.target.parentNode.removeChild(e.target); 
      }  
     } 
    } 

    //ON DOCUMENT LOAD RUN INIT 
    document.addEventListener('DOMContentLoaded',init); 

Answer 1

Sie versuchen, HTML an Overlay anzuhängen, bevor es an den Körper angehängt wird. Folgendes ist der aktualisierte Code.

init=()=>{ 
     //SELECT & BIND (CLICK) EVENT 
     document.querySelector('a.menuToggle, a#welcomeDivs').addEventListener('click',modal.overlay.init); 
    } 
    modal={ 
     overlay:{ 
      init:()=>{ 
       //CREATE OVERLAY 
       var overlay = document.createElement('overlay'); 
       overlay.id = 'welcomeDivsss'; 
       //SET (CLICK) EVENT TO REMOVE ITSLEF 
       overlay.addEventListener('click',modal.overlay.remove); 

       //APPEND TO INTERFACE 
       document.body.appendChild(overlay); 

       // After overlay added to html. "welcomeDivsss" is overlay id you specified. 
       $("#welcomeDivsss").append("<strong>Hello</strong>"); 

      }, 
      remove:(e)=>{ 
       //REMOVE ITSELF 
       e.target.parentNode.removeChild(e.target); 
      }  
     } 
    } 

    //ON DOCUMENT LOAD RUN INIT 
    document.addEventListener('DOMContentLoaded',init); 

Answer 2

Versuchen zu verwenden jQuerys .html() Funktion:

$("overlay").html("<strong>Hello</strong>"); 

Answer 3

Vanilla JavaScript:

document.getElementById('welcomeDivsss').innerHTML = "<h1>hi</h1>"; 

JQuery:

$("#welcomeDivsss").html("<h1>hi</h1>"); 

---

Editiert: Es ist auch möglich, dass Sie versuchen, Ihren JavaScript-Code zu verwenden, bevor die spezifischen HTML-Element geladen wird. Im Folgenden finden Sie den gleichen Code wie oben, aber mit dem Code, der den Browser die JavaScript nach der Seite sagt nur auszuführen hat voll beladen: Vanilla JavaScript:

window.onload = function(){ 
    document.getElementById('welcomeDivsss').innerHTML = "<h1>hi</h1>"; 
} 

JQuery:

$(document).ready(function(){ 
    $("#welcomeDivsss").html("<h1>hi</h1>"); 
})