How to insert html on javascript or jquery

Question

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

can you show us the html code where you are looking to append the new code? Is "overlay" an id value? if it were, it should be $("#overlay") — Webeng
– Webeng, Commented Apr 16, 2017 at 9:53
the code output <overlay id="welcomeDivsss"> </overlay> on the html file. what im trying to do sr is to add an html code inside overlay @Webeng — techno bisuit
– techno bisuit, Commented Apr 16, 2017 at 9:54
@Webeng No :( nothing is showing up event this $("#welcomeDivsss").html("<h1>hi</h1>"); — techno bisuit
– techno bisuit, Commented Apr 16, 2017 at 10:05
an <overlay> tag doesn't exist in html. Try using <div id="welcomeDivsss"></div> and then use the same code as in my answer. Let me know if that fixes it for you — Webeng
– Webeng, Commented Apr 16, 2017 at 10:12

Webeng · Accepted Answer · 2017-04-16 10:18:52Z

3

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

edited Apr 16, 2017 at 10:18

answered Apr 16, 2017 at 9:57

Webeng

7,0984 gold badges37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AppleForTheKing · Accepted Answer · 2017-04-16 09:55:42Z

0

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

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

answered Apr 16, 2017 at 9:55

AppleForTheKing

1051 silver badge12 bronze badges

Comments

Ashokkumar M. Prajapati · Accepted Answer · 2017-04-16 10:06:56Z

-1

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

answered Apr 16, 2017 at 10:06

Ashokkumar M. Prajapati

4934 silver badges12 bronze badges

1 Comment

techno bisuit Over a year ago

Wow! thats amazing youre awesome

Collectives™ on Stack Overflow

How to insert html on javascript or jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related