Many roads lead to Rome

#javascript

Become a programming, besides curiosity, also must have intelligence/skills outsmart (if it fails in a certain way, must try in other ways and so on)

The use of a simple editor will be more useful in the process of learning javascript programming, because we are required to explore the entire flow of programs that we make without any automatic correction. If I am asked to recommend, I recommend as I currently use (Notepad++).

Finding references is very necessary for someone who wants to be a programmer, as for the basic references we have to learn that I can recommend are MDN (https://developer.mozilla.org/), W3School (https://www.w3schools.com/) and Stackoverflow (https://stackoverflow.com/) . We don't need to learn everything because if that's what we do, we can go crazy alone. We simply search for what we need. Every piece of information we have to document properly for offline reference.

Okay for beginners, let's try:

The challenge is to fill a piece of html in elements that are in HTML with a piece of javascript.
For example we want to put < div >Hello< /div > anywhere in the html, or call the js file or css file to place it in our html.

<head>
  <link href="css/cvd.css" rel="stylesheet" />
  <link href="css/mn.css" rel="stylesheet" />
  <script src="js/cmn.js"></script>
  <script src="js/cvs.js"></script>
  <script src="js/mn.js"></script>
</head>
<body>
  <div id='test'>
    <div>Hello</div>
  </div>  
</body>

<script>
  function include(htmlcontent, toEl){
    //because of the .createRange() factor, then htmlcontent in the form of an array
    //used include(['contentHTM', ...], 'html' || 'body' || head /* default = 'head' */)
    toEl = toEl||"head";
    var range = document.createRange();
    var docElement = (toEl == "html"||toEl == "head"||toEl == "body")? docElement = document.getElementsByTagName(toEl)[0] : docElement = toEl
    /*      
    if(htmlcontent == null){
      alert(new TypeError('The HtmlContent must be filled in'))
    }
    if (htmlcontent.length == 1 ){
      docElement.appendChild(range.createContextualFragment(htmlcontent[0]));
    }
    if (htmlcontent.length >1 ){
      docElement.appendChild(range.createContextualFragment(htmlcontent));
    }*/
    /*simplified to be*/
    switch (true){
       case htmlcontent == null : alert(new TypeError('The HtmlContent must be filled in'));break;
       case htmlcontent.length == 1 : docElement.appendChild(range.createContextualFragment(htmlcontent[0]));break;
       case htmlcontent.length >1 :docElement.appendChild(range.createContextualFragment(htmlcontent));;break
    }
  };
  /* Examples of its use*/
  //window.onload = (function(){
  //or
  //(function(){
  //or

    /* Examples of calling js or css files */
    var cvsCss = "css/cvd.css",
        mnCss  = "css/mn.css",
        cmJs  = "js/cmn.js",
        cvsJs = "js/cvs.js",
        mnJs = "js/mn.js",
        stySht = "stylesheet";
    var tpl_css = function(cont){return `<link href=${cont} rel=${stySht} \/>`} 
    var tpl_scr = function(cont){return `<script src=${cont}><\/script>`} 
    include([
      tpl_css(cvsCss),
      tpl_css(mnCss),
      tpl_scr(cmJs),
      tpl_scr(cvsJs),
      tpl_scr(mnJs)
    ],"head");
    // or
    //],"html");
    //],"body");


    /*Example of filling html in element*/
    include(['<div id=\'test\'></div>'],'body');
    include(['<div>Hello</div>'],document.getElementById('test'));
  //})();
  //or
  //})();
  //or none

</script>