CODEWITHSUNDEEP
javascriptjquery
techno bisuit
techno bisuit

Reputation: 83

How to insert html on javascript or jquery

Hi i need your help guys im new on javascript or jquery im trying to add a html code inside the overlay element but its not working im using $( "overlay" ).append( "Hello" ); this one but its not working

the js below outputs what im trying to do is to input an html code inside it 

 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);

Upvotes: 3

Views: 2628

Answers (3)

Webeng
Webeng

Reputation: 7113

Vanilla JavaScript:

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

JQuery:

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

Edited: It is also possible that you are trying to use your JavaScript code before the specific html element is loaded. Below is the same code as above but with the code that tells the browser to only execute the JavaScript after the page has fully loaded: Vanilla JavaScript:

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

JQuery:

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

Upvotes: 3

Ashokkumar M. Prajapati
Ashokkumar M. Prajapati

Reputation: 493

You are trying to append html to overlay before it is appended to body. Following is updated 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);

Upvotes: -1

AppleForTheKing
AppleForTheKing

Reputation: 105

Try to use JQuery's .html() function:

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

Upvotes: 0

Related Questions