gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 15:58:19 26 4
gpt4 key购买 nike

我希望在单击按钮时生成一些新的 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。我想知道我是否可以得到一些关于为什么会这样的指示?谢谢

最佳答案

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

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

enter image description here

关于javascript - 使用 Javascript 对象动态生成的 html 不采用 Bootstrap 或 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38162343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com