Javascript 创建元素、附加类和分配子元素

我在

jQuery

中有这段代码，但希望将其转换为纯javascript。正如您所知，

jQuery

允许您通过选项和方法轻松地动态创建元素

想知道在没有外部库的情况下尝试和实现此功能的最佳方法

jQuery：

var color = 'red';
var overlay = document.getElementById('load');
var rgb = hexToRgbA(color);

var percentage = $("<div>")
  .html("<span></span>")
  .css({
    color: color,
    "border-color": rgb
      ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`
      : color
  })
  .addClass("loader")
  .appendTo(overlay);

percentage.children("div").css("border", color);

var color = 'red';
var overlay = document.getElementById('load');
var rgb = hexToRgbA(color);


var percentage = document.createElement("div");
    percentage.innerHTML = "<span></span>";
    percentage.color = color, "border-color": rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : color;
    addClass(percentage, "loader");

  function addClass(el, className) {
    if (el.classList)
      el.classList.add(className)
    else if (!hasClass(el, className)) el.className += " " + className
  }

var color='red'；
var overlay=document.getElementById（'load'）；
var rgb=六角体GBA（颜色）；
变量百分比=$（“”）
.html（“”）
.css({
颜色：颜色，
“边框颜色”：rgb
？`rgba（${rgb.r}，${rgb.g}，${rgb.b}，0.7）`
：颜色
})
.addClass（“加载器”）
.附加（覆盖）；
百分比.children（“div”）.css（“边框”，颜色）；

目前为止纯Javascript的尝试：

var color = 'red';
var overlay = document.getElementById('load');
var rgb = hexToRgbA(color);

var percentage = $("<div>")
  .html("<span></span>")
  .css({
    color: color,
    "border-color": rgb
      ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`
      : color
  })
  .addClass("loader")
  .appendTo(overlay);

percentage.children("div").css("border", color);

var color = 'red';
var overlay = document.getElementById('load');
var rgb = hexToRgbA(color);


var percentage = document.createElement("div");
    percentage.innerHTML = "<span></span>";
    percentage.color = color, "border-color": rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : color;
    addClass(percentage, "loader");

  function addClass(el, className) {
    if (el.classList)
      el.classList.add(className)
    else if (!hasClass(el, className)) el.className += " " + className
  }

var color='red'；
var overlay=document.getElementById（'load'）；
var rgb=六角体GBA（颜色）；
var百分比=document.createElement（“div”）；
percentage.innerHTML=“”；
percentage.color=颜色，“边框颜色”：rgb`rgba（${rgb.r}，${rgb.g}，${rgb.b}，0.7）`：颜色；
addClass（百分比，“加载器”）；
函数addClass（el，类名）{
if（el.classList）
el.classList.add（类名称）
如果（！hasClass（el，className））el.className+=“”+className
}

在javascript中编辑css的正确方法（更恰当地称为“”）：

要进入DOM：

// parent.appendChild(child);
overlay.appendChild(percentage);

由于

percentage

是一个新创建的元素，因此它不会有任何类属性。因此，您还可以使用以下方法添加类：

对于

子项

部分，有一个属性可以使用。然而，在IE8及以下版本中有点棘手

但是，在您的情况下，您可能不需要此

子项

属性，您可以使用

getElementByTagName

从父项中查找所有

div

元素：

percentage.getElementsByTagName('div');

但是，上面将返回一个类似的数组。因此，您不能像这样编辑它们的样式：

percentage.getElementsByTagName('div').style.borderColor = ...

相反，您应该将其视为一个

数组

：

var child = percentage.getElementsByTagName('div'),
    i = 0,
    len = child.length;

/* SOLUTION 1 - A  simple for loop */

for (; i < len; i++){
    child[i].style.borderColor = color;
}

/* SOLUTION 2 - Borrowing Array constructor's function to use on HTMLCollection constructor*/

Array.prototype.forEach.call(child, function(el){
    el.style.borderColor = color;
});

var child=percentage.getElementsByTagName（'div'），
i=0，
len=child.length；
/*解决方案1-一个简单的for循环*/
对于（；i

然而，从您给定的代码来看，我认为在

百分比中没有任何
div
元素

请记住，在纯Javascript中，与jQuery不同，元素集合是。这意味着，一旦引用了集合，即使创建了与集合条件匹配的新元素，它也不会更新自身

因此，
percentage.children（“div”）.css（“border”，color）
无法完全转换为纯javascript，因为添加到
percentage
中的新
div
将不会获得
borderColor=color
的样式（因为它们不是活动的）。每次都需要手动设置新的
div
s样式

结果是

但是，新创建的
div
将不会获得css样式，因为赋予它们样式的操作是在创建之前完成的，并且这些操作只应用于当时的现有元素。
什么是
addClass
？这不是您更改CSS的方式，使用
percentage.style.color
，也不是您设置多个CSS规则的方式。Addclass是一个单独的函数-编辑回复为什么不总结您到目前为止拥有的内容和仍然缺少的内容？因此，您可以要求提供您无法完成的部分。@lilezek-它就在那里-到目前为止纯Javascript的尝试-仍然无法将
apendto
破解为dom&
children
方法