Присоединение сложного HTML к div с помощью функции javascript? - PullRequest
Новая
       51

Присоединение сложного HTML к div с помощью функции javascript?

0 голосов
/ 27 октября 2019

Я пытаюсь создать функцию 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'")


})

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Вы смешиваете методы 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);

Вот jsbin: https://jsbin.com/qucaxanohe/edit?html,js,output

0 голосов
/ 27 октября 2019

Одним из способов было бы вставить ваш HTML-код в целевой div с самого начала, но скрытым (используя CSS display:none или jQuery hide()).

Затем при вызове функции используйте jQuery's. 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>
...