javascript - 如何使用 document.createElement() 和 appendChild() 添加 HTML 内容？

Question

所以我正在创建一个简单的登录页面，并选择显示一个模式对话框，该对话框将显示“正在登录...”，然后有一个旋转加载器，

我可以使用 document.createTextNode('Logging you in...); 轻松添加我想要的文本。

我的问题是我不知道如何在文本下方添加我的 CSS3 旋转加载器。这是我的代码:

        <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> 

根据要求；

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

我希望能够在其中放置一个加载器/微调器？像这个..

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

因为我刚刚开始学习 javascript，所以我非常感谢任何建议

Answer 1

好的，这就是您所需要的。根据您在 codepen 中的预期结果，我 fork 了您的 jsfiddle 并做了一些修改 working example jsfiddle .您已经准备好 scss 动画，所以它只是添加到您的模式框。

要添加微调器，请更新 activateModal 脚本

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);
}

片段:

老实说，你似乎把一切都安排好了。如果您期望不同的结果，请告诉我们。

P.S:我明白 :) 你会习惯的。