Check if a string entered as a function parameter is one of the HTML tagnames

Question

I am working on a constructor that I can use as stated in the code comment shown in the following code:

//CONSTRUCTOR
//creates a child element of the specified kind
//adds the child to specified parent
//optionally assigns the child an ID
// optionally assigns the child up to 4 classes

function Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined) {
  if (!(this instanceof Adjoin)) {
    return new Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined);
  }
  this.childKind = childKind;
  this.childID = childID;
  this.firstChildClass = firstChildClass;
  this.secondChildClass = secondChildClass;
  this.thirdChildClass = thirdChildClass;
  this.addChildTo = function(parentID) {

    const parent = document.getElementById(parentID);
    const child = document.createElement(childKind);

    parent.appendChild(child);

    if (childID !== undefined) {
      child.setAttribute("id", childID);
    }

    if (firstChildClass !== undefined) {
      child.classList.add(firstChildClass);
    }

    if (secondChildClass !== undefined) {
      child.classList.add(secondChildClass);
    }

    if (thirdChildClass !== undefined) {
      child.classList.add(thirdChildClass);
    }

    if (fourthChildClass !== undefined) {
      child.classList.add(fourthChildClass);
    }
  }
};

This works if I enter the code like this somewhere:

new Adjoin("div", "foo_id", "foo_class").addChildTo("some_parent")

This also works just fine:

new Adjoin("div").addChildTo("some_parent")

What I'm stuck on is a means to check if the first parameter is one of the HTML tag names. For example, I want to throw an error if the code is entered as:

new Adjoin("not_an_html_element", "foo_id", "foo_class").addChildTo("manchoo_parent")

Thanks in advance!

UPDATE

Well, it seems I posted this question a bit too quickly! I entered the following code:

new Adjoin(75).addChildTo("footer");

and got this error:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('75') is not a valid name.

So there is a built in error already.

However, when I enter the following code:

new Adjoin("DaveyJones").addChildTo("footer");

I get the following "tag" added to the footer on my site:

<daveyjones></daveyjones>

Obviously that is not a valid HTML tag.

An error is thrown for anything that is not a string but any string will be added a an HTML tag without an error.

YET ANOTHER UPDATE

I tried this, as suggested by user2676208 and in this question by setting it up as a conditional:

if (document.createElement(this.childKind).toString() != "[HTMLUnknownElement]") {
  console.log("That is a valid HTML element!")
} else {
  console.log("That is NOT a valid HTML element!")
}

However, it always logs "That is a valid HTML element!" whether I use "div" or "DaveyJones" or "anyOtherString".

As much as I do not like the idea, I may have to do this by setting up an array of tag names and making the comparison in a loop. I just really hoped there was a way to avoid that as it seems ham-handed to me. I expected that Javascript would already have a means of checking for valid HTML...

Answer 1

I don't think I can mark this as a duplicate, but you should check out the question here: Verify whether a string is a valid HTML tag name.

From Stryner's answer there,

function isValid(input) {
  return document.createElement(input).toString() != "[object HTMLUnknownElement]";
}

Answer 2

The error is not thrown because even if the element you create is not a valid HTML tag, it will still create that element, but it will be an HTMLUnknownElement.
Hence why <daveyjones></daveyjones> is still shown.

To solve your issue, you should have a function that verifies if the input you're receiving is a valid HTML tag

Answer 3

You can create an array of HTML tags you want to be considered as valid and check, whether the element being created inside the function is present in this array using Array.indexOf().