CODEWITHSUNDEEP
javascripthtml
bnc
bnc

Reputation: 57

Javascript setAttribute not working properly

I'm trying to implement the includeHTML() function provided by w3schools.

https://www.w3schools.com/howto/howto_html_include.asp

It works properly if I manually create a div, like in the site:

<div w3-include-html="awebsite.html"></div>

However if I try to create a div with Javascript then it is not working, for example:

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

Is it because the div does not have the w3-include-html attribute by default? What should I do to make this work?

Thanks for help!

Update, this is my index.html, to make it more clear in which order things appear, it also shows the includeHTML function:

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>
</head>
<body>
<!--this is the manually created div that works-->
<div w3-include-html="2.html"></div>
<!-- divs created with js.js have the correct attribute but don't show any content -->
<script src="js.js"></script>
<script>
includeHTML();
</script>
</body>

Here's the part where the js.js creates the div that should contain the includeHTML(); content. The div is added to a cell that is added to a grid, and the whole thing is added to the document.body. It's visible in the site so it correct, for example the text element "middle" is visible. The page is divided to header, middle and footer as a grid all of that is also visible.

cell.className = "middle";
cell.id = "middle-"+cellIdNo;
var text = document.createTextNode("middle");
var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "2.html");
cell.appendChild(text);
cell.appendChild(htmlIncluder);

Upvotes: 0

Views: 5499

Answers (4)

bnc
bnc

Reputation: 57

Got it working by moving the includeHTML function from index.html to my js.js file. And adding there this bit of code in the window.onload = function() {}:

if( document.readyState === 'complete' ) {
    includeHTML();
}

Now it calls the function when the divs are created. Still don't know why it didn't work from the index.html.

Upvotes: 0

haugsand
haugsand

Reputation: 420

The includeHTML function loops through the document's elements, and looks for elements that have the attribute w3-include-html.

Where in your code do execute includeHTML();?

The function needs to be executed after you have created the div elements with javascript.

The code below will probably work:

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

includeHTML();

Upvotes: 0

user7148391
user7148391

Reputation:

It because there's no such thing as body.[something], the element doesn't get even added to the DOM.

use document.body or document.querySelector('body') etc...

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

UPDATE : Since the question got updated.

I don't understand by It's not working because it down.

However, since it's not a built-in property into the HtmlElement.

Custom properties can be accessed through attributes property or getAttribute() method 

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("customattribute", "Custom Attribute Value");
htmlIncluder.setAttribute("class", "div");
document.body.appendChild(htmlIncluder);

var el = document.querySelector('.div');
console.log(el.getAttribute('CustomAttribute'));
console.log(el.attributes['customattribute'].value);
.as-console-row-code{font-size:1.2em !important;}
.div{
  width: 100px;
  height: 100px;
  background: orange;
}

Upvotes: 2

brk
brk

Reputation: 50291

Try document.body instead ofcbody

var htmlIncluder = document.createElement("div");
var t = document.createTextNode("test"); // only for testing
htmlIncluder.appendChild(t); // only for testing
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

Upvotes: 2

Related Questions