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对象＆＃34; pages＆＃34;：

生成的

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方法＆＃34; append（）＆＃34;可以很好地将html插入到文档中，但是它的样式与文档的其余部分完全不同，即它似乎没有选择up和Bootstrap和/或文档自己的CSS。我想知道我是否可以得到一些指示，为什么这可能是？感谢

Answer 1

您返回的HTML的引号有问题。您曾多次使用‘和’代替'。试试这个：

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

};

Answer 2

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

您只需找到并替换那些“坏”的引号。

使用Javascript对象动态生成的html不会选择Bootstrap或CSS样式

2 个答案: