javascript - 使用 Javascript 对象动态生成的 html 不采用 Bootstrap 或 CSS 样式

Question

我希望在单击按钮时生成一些新的 html 并将其插入到我的网页中。

document.getElementById("generate").addEventListener("click", function(event){        


        // Get number of steps user has typed in
        steps = document.getElementById("steps").value; 
        console.log(steps); 

        if (steps == ""){

            alert("Please provide number of synthetic steps");
        }        

        // Once click generate button, delete it and steps field to prevent being clicked again.         
        if (steps != ""){            

            // Array of elements wish to remove
            var removal = ["#steps", "#generate", "#field-wrap"]; 

            for (var i in removal){            

                $(removal[i]).remove();

            }    

            var page = new pages(steps);

            // Obtain html to show in first wrapper 
            var initial_html = page.initial(); 


            // Put initial html after first box id
            $('#wrapper').append(initial_html);            

      }
});

该页面使用 Bootstrap 设计样式，我知道静态内容都可以正常工作。新的 html 内容是从 Javascript 对象“页面”生成的:

function pages(step){            

    this.step = step; 

    // Function to insert in JME window. Note, had to change id to 

jsme_container1 in html and script to enable function to place canvas in correct position.            

    this.draw = function jsmeOnLoad () {                

        document.JME2 = new JSApplet.JSME("jsme_container1", "300px", "250px");            


        // Add identifier to JME object 
        document.JME2["step"] = this.step; 

        // Push on to global array
        drawing_objects.push(document.JME2);                 

    }

    // html to display in place of generate button for first JME object 
    this.initial = function(){

        return "<div id=‘field-wrap’><div id=‘button’><div class='form-groups' style='padding-bottom:5px;'><input autocomplete='off' autofocus class='form-control' name='Quantity'placeholder='Quantity required' type='text' id='quantity' style='width:150px;'/></div><div class=‘dropdown’ style='position:absolute; top:0px; right:0px;'><button class=‘btn btn-primary dropdown-toggle’ id=‘touch’ type=‘button’ data-toggle=‘dropdown’>grams <span class=‘caret’></span></button><ul class=‘dropdown-menu’ id=‘menu’><li><a href=‘#’>milligrams</a></li> <li><a href=‘#’>grams</a></li><li><a href=‘#’>kilograms</a></li></ul></div></div> <form role=‘form’> <div class=‘form-group’><input type='text' class=‘form-control input-sm’ id=‘moles_start’ autocomplete='off' class='0' autofocus class='form-control' name='moles' placeholder='Moles' readonly/></div> <div class=‘form-group’> <input type='text' class=‘form-control input-sm’ autocomplete='off' class='0' autofocus class='form-control' name='smiles' placeholder='Smiles' readonly/> </div> <div class=‘form-group’><input type='text' class=‘form-control input-sm’ autocomplete='off' class='0' autofocus class='form-control' name='MW' placeholder='Molecular Weight' readonly/></div></form></div>";  

    };

}

我发现使用 jQuery 方法“append()”可以很好地将 html 插入到文档中，但是它的样式根本不像文档的其余部分，即它似乎没有拾取 Bootstrap 和/或文档自己的 CSS。我想知道我是否可以得到一些关于为什么会这样的指示？谢谢

Answer 1

是的，问题确实在引号中。查看这些类名和 ID 在开发工具中的外观。

您所需要做的就是找到并替换那些“错误”的引号。