4

Very odd problem. I have some code:

var container = document.getElementById("graph"); //container element
console.log("Containers id is " + container.id);  //graph

var element = document.createElement(this.componentType); //"canvas"
element.id = "canvasId";

console.log(element.outerHTML); //<canvas id="canvasId"></canvas>
//container.innerHTML = element.outerHTML;
document.getElementById("graph").appendChild(element);

The code seems to work. If 

this.componentType = "div"

or 

this.componentType = "custom"

then it'll apply the closing tags, ie. 

<div id="canvasId"></div>

or 

<custom id="canvasId"></custom>

But if 

this.componentType = "canvas"

then it'll only produce the opening tag

<canvas>

No closing tag !EVEN THOUGH! console.log displays the closing tag! So I do get a closing tag, but no matter wether I use the appendChild technique or the outerHtml technique, the Document only applies the opening tag of canvas (). Other tags and custom tags load.

I checked a few of the Similar Questions on the side, and thought the answer would be here by sheepy (down in the middle of the page). But someone else on reddit showed that his code worked.

var element = document.createElement('canvas'); 
document.body.appendChild(element);
console.log(element.outerHTML); // "<canvas></canvas>"

I checked on Chrome, and Safari, and both have same results in dev tools. Showing only the opening tag if it is canvas. All others show proper.

edit:Results

Community
  • 1
  • 1
Tinkle Pooplebottham
  • 95
  • 8
  • 1
    What version of Chrome are you using? I'm using the latest and it works fine. – zfrisch Nov 11 '16 at 22:02
  • This `#graph`, which type of an element is it? I made [a short example](https://jsfiddle.net/kqhnk3to/) (I hope I've understood the issue?), and it seems to work fine, also in Chrome54 ...? – Teemu Nov 11 '16 at 22:07
  • Teemu: that's it but I need to see the canvas element on the page. Also in the page source, I only get . No in the end. But it ' 'console.logs ' – Tinkle Pooplebottham Nov 11 '16 at 22:32
  • google version: 54.0.2840.71 (64-bit) , gonna update after dinner – Tinkle Pooplebottham Nov 11 '16 at 22:33
  • @Teemu And #graph is a div – Tinkle Pooplebottham Nov 11 '16 at 22:49
  • "_the page source_" Do you mean the source which you get by CTRL+U? – Teemu Nov 11 '16 at 22:53
  • Developer tools: +i – Tinkle Pooplebottham Nov 11 '16 at 23:15
  • Possible duplicate of [How to add closing tag for canvas in three js rendered Canvas?](http://stackoverflow.com/questions/37339375/how-to-add-closing-tag-for-canvas-in-three-js-rendered-canvas) – Kaiido Nov 12 '16 at 01:23
  • This is just in the dev tools. Your closing tag is here, in the markup. – Kaiido Nov 12 '16 at 01:24
  • Is there a way to see the markup? I see it on top right corner. Is that not it? (In the link at the end of the question). – Tinkle Pooplebottham Nov 12 '16 at 05:13
  • 2
    Yes, that's it. I suppose this is a feature in Chrome's console. The HTML to the DOM is created correctly. Canvas has no content, hence it doesn't need a closing tag (in the console only, HTML requires it ofcourse.). If you'd add some text into the newly-created canvas element, [you'd see the closing tag](https://jsfiddle.net/kqhnk3to/1/) in Chrome Dev Tools too. – Teemu Nov 12 '16 at 08:21
  • @Kaiido I guess thats a similar problem but I didn't use any library. There is a link inside the answer, but it is slightly on the technical side. But Teemu, gave a good enough example to show that its there. Thanks for showing the link. I'll re-read. – Tinkle Pooplebottham Nov 12 '16 at 22:49
  • @Teemu Thanks for the explanation. I'm still a little confused as to why it's like that (I don't get that issue on my windows partition), but I'll move forward at least. – Tinkle Pooplebottham Nov 12 '16 at 22:50
  • I have that problem with INPUT-tag. I can't set the innerHTML property of the element. – Bitterblue Aug 03 '18 at 13:35

1 Answers1

1

Sigh. So after coding a simple html file with nothing in the body (and still same problem), I found an UGLY solution:

document.body.innerHTML = "<div><canvas>" + " <canvas></div>";

However, it inserts an extra . At least it closes and uses the id'd canvas :/

<div><canvas><canvas></canvas></div>

Also, if I do not add the + in the middle, I only get a

<div><canvas> </div>

. I was using pyCharm. I thought it was a pyCharm localserver bug, so I wrote a seperate html file in textEdit but got the same results when loaded with no server running. Next stop, going to try it in Windows to see if it's my system thats screwy.

EDIT: CONFIRMED working in Windows. Looks like my next step is to update/refresh osx yosemite.

EDIT: Including Teemus explanation:

Yes, that's it. I suppose this is a feature in Chrome's console. The HTML to the DOM is created correctly. Canvas has no content, hence it doesn't need a closing tag (in the console only, HTML requires it ofcourse.). If you'd add some text into the newly-created canvas element, you'd see the closing tag in Chrome Dev Tools too. – Teemu

I still I find it odd that in Windows it worked properly, but in OSX (Safari & Chrome), the results are the same. So I guess, this question is answered.

Tinkle Pooplebottham
  • 95
  • 8