Javascript setAttribute not working properly

Question

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

Do yourself a favor and learn to use your browser's error console before you do anything else. It will save you so much time. It would have told you what was wrong here. — Mark
– Mark, Commented May 11, 2018 at 16:34
Hmm…Chrome gives me: Uncaught ReferenceError: body is not defined and Safari: ReferenceError: Can't find variable: body — Mark
– Mark, Commented May 11, 2018 at 16:47
Yes it is because I first forgot to write the document. I updated the question now. — bnc
– bnc, Commented May 11, 2018 at 16:48

brk · Accepted Answer · 2018-05-11 16:33:37Z

2

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

answered May 11, 2018 at 16:33

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bnc Over a year ago

I made a mistake when writing the question, fixed it now. The mistake I made here is not the actual reason for this not to work. Sorry.

score 2 · Accepted Answer · 2018-05-11 18:02:49Z

2

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

edited May 11, 2018 at 18:02

answered May 11, 2018 at 16:33

user7148391

10 Comments

bnc Over a year ago

Yes I know, it wasn't from the actual code, so that is not the problem. Sorry for making an error there. The element I created gets added so that is not the reason.

bnc Over a year ago

As far as I know the problem is that there is no attribute w3-include-html for the div. So how can I create that with javascript, clearly it is possible with manually creating the div but how can I do the same with JS?

bnc Over a year ago

Thanks for answer! What I mean by "not working" is that the div is not showing the html it should. This is the div copied from firefox inspector: <div w3-include-html="2.html"></div> And it was created with javascript. However it is not showing anything. But if I create a div like this: <div w3-include-html="2.html"></div> in plain html manually straight into index.html it works! I don't understand why. They are exactly the same but for some reason the first one doesn't show the includeHTML() function.

bnc Over a year ago

What I noticed tho is that the div I created with javascript is in the inspector after the includeHTML() function call. I don't know why as my script in the index.html is before the function call! Might this be the reason, and if so how to fix it? My own javascript is before the function call already so I don't understand why they change places in the inspector.

user7148391 Over a year ago

Do you understand what includeHTML(); does ? is it the same as the one in w3school ?

|

haugsand · Accepted Answer · 2018-05-11 18:45:07Z

0

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

answered May 11, 2018 at 18:45

haugsand

4202 silver badges5 bronze badges

1 Comment

bnc Over a year ago

This is my index.html, the js.js creates a grid where I have the div which has the correct attribute. <body> <div w3-include-html="2.html"></div> <script src="js.js"></script> <script> includeHTML(); </script> </body> So the first div in the body is what I do manually which works, and the others made with JS don't.

bnc · Accepted Answer · 2018-05-11 20:14:15Z

0

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.

answered May 11, 2018 at 20:14

bnc

673 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript setAttribute not working properly

4 Answers 4

1 Comment

10 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related