Dynamically rendered SVG is not displaying

Question

I have the following svg object which if I put in html page directly without using code(static) it renders properly.

but same svg content if I insert into my html page using JavaScript it is not showing and if I open it in firebug and inspect svg and try to edit svg tag, it displays.

What could be the problem

<svg height="100" width="100">
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>
</svg>

I am adding svg dynamically using below code, here container will be my div which is there under body

        viewPort = document.createElementNS('http://www.w3.org/2000/svg','svg');

        viewPort.setAttribute('height', 100);

        viewPort.setAttribute('width', 100);

        container.innerHTML = '';

        container.appendChild(viewPort);

After this I am adding rect inside this using

            boardElement = document.createElement('rect');

            boardElement.setAttribute('width', '100');

            boardElement.setAttribute('height', '100');

            boardElement.setAttribute('y', '1');

            boardElement.setAttribute('x', '1');

            boardElement.setAttribute('style', "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)");


viewPort.appendChild(boardElement);

Answer 1

The element boardElement should be declared like so

boardElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");