CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
Jamie Lindsey
Jamie Lindsey

Reputation: 993

How can I add HTML content using document.createElement() and appendChild()?

So I am creating a simple login page and have chosen to display a modal dialog that will state 'Logging you in...' and then have a spinning loader,

I can easily add the text I want with document.createTextNode('Logging you in...);.

My issue is that I don't know how to then add my CSS3 spinning loader underneath the text. Here is my code:

        <script>
          function activateModal() {
            // initialize modal element
            var modalEl = document.createElement('h2');
            modalEl.setAttribute("class", "modal-header");
            modalEl.style.width = '400px';
            modalEl.style.height = '300px';
            modalEl.style.margin = '100px auto';
            modalEl.style.backgroundColor = '#828282';
            modalEl.style.color = '#ffffff';

            // add content
            var loginTxt = document.createTextNode('Attempting to log you in...');
            modalEl.appendChild(loginTxt);

            // show modal
            mui.overlay('on', modalEl);
          }
    </script>

As requested;

https://jsfiddle.net/jackherer/ffghkc8k/

I'd like to be able to place a loader/spinner in there ? like this one ..

https://codepen.io/jackherer/pen/dpBzym

As I'm just beginning to learn javascript I would really appreciate any advice people

Upvotes: 1

Views: 5119

Answers (1)

Searching
Searching

Reputation: 2279

OK so this is what you will need. From your expected outcome in codepen, I've forked your jsfiddle and modified a bit working example jsfiddle . You already have the scss animation ready, so it's just adding to your modal box.

To add the spinner, update the activateModal script

function activateModal() {
// initialize modal element
var modalEl = document.createElement('h3');
modalEl.setAttribute("class", "modal-header");
modalEl.style.width = '400px';
modalEl.style.height = '300px';
modalEl.style.margin = '100px auto';
modalEl.style.backgroundColor = '#828282';
modalEl.style.color = '#ffffff';
modalEl.style.textAlign = 'center'; //Extra addition. You may remove this.

// A span element so you can add styling
var loginTxt = document.createElement("span");
loginTxt.innerHTML = 'Attempting to log you in...';
modalEl.appendChild(loginTxt);
modalEl.setAttribute("class", "loader");

//SPINNER START 
var newDiv = document.createElement("div");
newDiv.setAttribute('class', 'loader');
// For simplicity, I choose to use the svg content as inner html. You may create this as an element
newDiv.innerHTML = '<svg class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg>';
modalEl.appendChild(newDiv);
//SPINNER END

// show modal
mui.overlay('on', modalEl);
}

Snip: outcome

To be honest you seem to have everything sorted. If you expected a diferent outcome let us know.

P.S: I understand :) You'll get used to it.

Upvotes: 1

Related Questions