Creation of element, appending class and assigning children

Question

I have this piece of code in jQuery but wanted to convert it into pure javascript. As you are aware, jQuery allows you to create an element on the fly very easily through options and methods.

Wanted to know what best method would be to try and implement this without an external library.

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

Pure Javascript Attempt so far:

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
  }

What is `addClass`? That's not how you change CSS, use `percentage.style.color`, and that's not how you set multiple CSS rules. — Andrew Li, Jul 23 '17 at 15:58
Why don't you summarize what you have so far and what is still missing? So you can ask for exactly the parts you aren't able to do. — lilezek, Jul 23 '17 at 16:03
@lilezek - its stated right there - Pure Javascript Attempt so far - still am unable to crack the `apendto ` to the dom & `children` method — jagmitg, Jul 23 '17 at 16:05

yqlim · Accepted Answer · 2017-07-23T16:47:56.057

The correct way to edit css in javascript (more appropriately called "style"):

percentage.style.color = color;
percentage.style.borderColor = rgb ? ... : color;

To append into DOM:

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

Since percentage is a newly created element, it will not have any class attributed. So you can also add class using setAttribute:

// element.setAttribute(attribute, className);
percentage.setAttribute('class', 'loader');

As for children part, there is a children property you can use. However, it's a bit tricky in IE8 and below.

In your case, though, you may not need this children property, you can use getElementByTagName to find all div elements from a parent:

percentage.getElementsByTagName('div');

However, the above will return an array-like HTMLCollection. So, you cannot just edit their style like:

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

Instead you should treat it like an array:

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

However, judging from your given code, I don't think there is any div element inside percentage.

Keep in mind that in pure Javascript, unlike jQuery, element collections are not live. Meaning once a collection is being referenced, it will not update itself even though new elements matching the collection's criteria are being created.

So, percentage.children("div").css("border", color) cannot be fully translated into pure javascript because new div appended into percentage will not get style of borderColor = color (because they are not live). You will need to manually style new divs every time.

Turns out in certain situations they are live.

However, the newly created div will not get the css styling because the operation to give them style is done before they are created, and those operations only apply to then existing elements.

Creation of element, appending class and assigning children

1 Answers1