javascript - 如何在 javascript 或 jquery 上插入 html

Question

嗨，我需要你们的帮助，我是 javascript 或 jquery 新手，我试图在覆盖元素内添加 html 代码，但它不起作用，我使用 $( "overlay").append( "Hello ”)；这个但它不起作用

下面的js输出我想做的是在其中输入html代码

 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

普通 JavaScript:

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

JQuery:

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

<小时/>

已编辑:您也有可能在加载特定 html 元素之前尝试使用 JavaScript 代码。下面是与上面相同的代码，但其中的代码告诉浏览器仅在页面完全加载后执行 JavaScript:普通 JavaScript:

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

JQuery:

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