title: Append to g element by id doesn't work properly in in d3 js
body: <p>I have created a <code>g</code> element with id <code>sdgImage</code> and appended an image element to it. But I couldn't append a <code>text</code> element to the sdgImage element </p>
  
  <pre><code>g.append("g").attr("id", "sdgImage").
              append("svg:image")
              .attr("transform", function (d) {
                  return "translate(" + arc.centroid(d) + ")rotate(" + computeImageRotation(d) + ")";
              })
              .attr("text-anchor", "middle")
              .attr("dx", "0") // margin
              .attr("dy", ".35em") // vertical-align
              .attr('width', 156)
              .attr('height', 156)
              .style("display", 'none')
              .attr("opacity", 0)
              .attr('class', style.rect)
              .on("click", imageClick)
              .attr("xlink:href", function (d) {
                  return d.image ? d.image : '';
              })
  d3.select("#sdgImage")
              .append("div").append("text").attr("text-anchor", "middle")
              .text('Back')
              .style("font-size", "15px")
              .style("display", function (d) {
                  return d.parent &amp;&amp; d.parent.name !== '' ? 'block' : 'none';
              })
              .attr("text-anchor", "middle")
              .attr("dx", "0") // margin
              .attr("dy", "8em") // vertical-align
              .attr('width', 30)
              .attr('height', 30)
              .style("fill", "#ffffff")
              .on("click", goBack)
              .style("cursor", "pointer")
  </code></pre>
  
  <p>This is what I get in the browser</p>
  
  <pre><code>&lt;g id="sdgImage"&gt;&lt;image transform="translate(-70,-80)" text-anchor="middle" dx="0" dy=".35em" width="156" height="156" opacity="1" class="rect__3uHGJ" xlink:href="" style="display: block;"&gt;&lt;/image&gt;&lt;/g&gt;
  </code></pre>