我正在尝试创建一个JavaScript函数，该函数会将复杂的html附加到已经存在的div（“复杂”表示的不仅仅是单个元素，例如
等等。）。我无法将整个div放在.innerHTML（“ div”）的（）内，而不会将其注册为错误，因为所有导致JS停止以字符串形式读取内容的符号。有什么建议吗？有没有办法让我在HTML文件中创建元素并将其隐藏，直到它被javascript中的函数触发？谢谢！ （下面的html和js）
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href= "style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class = "row r1">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<h1>Your Password Generator</h1>
</div>
<div class = "col-md-3"></div>
</div>
<br><br><br>
<div class = "row r2">
<div class = "col-md-3"></div>
<div class = "col-md-6 hello">
<p>Hello, friend. Welcome to your new password generator. <br> Click "continue" to customize your password.</p>
</div>
<div class = "col-md-3"></div>
</div>
<br> <br>
<div class = "row r3">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<div class = "cntrContent"></div>
</div>
<div class = "col-md-3"></div>
</div>
<div class = "characterSelect">
</div><div class = "text-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Special Characters
</label> <br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Numbers
</label> <br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Letters
</label>
</div>
<br> <br>
<div class = "row r4">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<div class= "text-center">
<button type="button" class="btn btn-light button">Continue</button>
</div>
</div>
<div class = "col-md-3"></div>
</div>
<!-- initial display: "Hello, friend. Welcome to your new password generator. Click "continue" to customize your password
then: new display, the question: "which kinds of characters would you like to include in your password?" followed by
list with checkboxes for "special character" "numbers" and "letters". this is followed by a "generate my password" button.
their selections will run through conditionals with event listeners. the next page will display the password under header "your password"
then a button below, "copy password to clipboard" and another button that says "i want another password" which brings
user back to customization options.-->
<script src="./script.js"></script>
JS:
var promptMsg = document.querySelector(".hello");
var cntrContent = document.querySelector(".cntrContent");
var button = document.querySelector(".button");
var characterSelect = document.querySelector(".characterSelect")
$(".button").on("click", function() {
$(promptMsg).text("What kinds of characters would you like to include in your password?");
$(characterSelect).innerHTML("THIS IS WHERE I AM TRYING TO APPEND THE DIV CLASSNAME 'characterSelect'")
})
您正在将jquery方法与JS方法混合。
根据您的情况，我建议使用template
<template id="myTemplate">
htmlto append
</template>
然后您可以使用append。
使用jquery：
var template = $("#myTemplate").html();
$(characterSelect).append(template);
使用普通javascript：
var template = document.getElementById("myTemplate").content;
characterSelect.appendChild(template);
一种方法是从头开始将HTML代码插入目标div，但隐藏（使用CSS的display:none或jQuery的hide()）。
然后，在您的函数调用中，使用jQuery的show()随时显示隐藏的HTML，如下所示：
$(document).ready(function() {
$("#to_hide").hide();
});
//simulating some waiting before function call
//JUST FOR ILLUSTRATION PURPOSES, not needed in actual code
setTimeout(function() {
callback();
}, 3000);
//your function that will show the div and do whatever you want to do here
function callback() {
//whatever you want to do here
$(".to_hide").show();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="to_hide">
<p>Some content</p>
</div>
</div>