如何使用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中的预期结果，我已经分配了您的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：我明白了:)你会习惯的。