How to have all symbols in a string without breaking the html?

I’m playing around with the password generator, but when the string contains a < or > it breaks the HTML and only outputs some of the characters. I’m using innerHTML instead on textContent because I need to wrap each password in a div. Is there another way I can do this without it breaking?

const alphabetUppercase = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split('');
const alphabetLower = "abcdefghijklmnopqrstuvwxyz".split('');
const symbols = "!@#$%^&*(>)_+=-`~,./;'[]|}"<{:?".split('');
const numbers = "123456789".split('');
const masterArray = alphabetUppercase.concat(alphabetLower, symbols, numbers);

const passwordButton = document.querySelector('.generate-passwords');
const outputPasswords = document.querySelector('.output-passwords');

passwordButton.addEventListener('click', function(e){
    e.preventDefault();
    let passwordArray = []; 
    // number of passwords
    let counter = 4;

    // Reset text content
    outputPasswords.innerHTML = '';  

    for (let x = 0; x < counter; x++) {
        let randomPassword = "";

        for (let i = 0; i < 15; i++) {
            let randomOutput = Math.floor(Math.random() * masterArray.length);
            randomPassword += masterArray[randomOutput];
        }
        passwordArray.push(randomPassword);   
        outputPasswords.innerHTML += '<div>' + passwordArray[x] + '</div>';
    } 
});

    <section class="generator">
        <a href="#" class="generate-passwords">Generate passwords</a>

        <div class="output-passwords"></div>
    </section>