以前跟人家介紹 d3.js 的時候，我都會笑稱 d3.js 其實就是 SVG 界的 jQuery。 但是最近發現不少人對兩者的 select 以及 append 有些疑問，特別把它寫下來紀錄。

先說大家比較熟悉的 jQuery：

  $("body")
    .append("<div></div>")
    .append("<em></em>");

上面這段程式碼產生的 HTML 應該會是這樣的

  <body>
    <div></div>
    <em></em>
  </body>

而在 d3.js 的情況：

  d3.select("body")
    .append("div")
      .append("em");

所產生的 HTML 結構會是這樣的：

  <body>
    <div>
      <em></em>
    </div>
  </body>

兩者最大的差異點在於 jQuery 的

  $("body").append(...)

回傳的會是 $('body') 本身，而 d3.js 的

  d3.select("body").append(...)

回傳的會是 append 後的 DOM (以上面的範例來說，d3.select("body").append('div') 回傳的就會是 <div></div> )， 所以再次執行 append 時，就會將 DOM 加入在前一個 append 的元素，也就是 <div></div> 之內。

那麼 jQuery 是否也可以像 d3.js 這樣 append 在新 DOM 內呢？ 先將 em 包在 div 內，最外層再包一層 append 就可以做到了。 像這樣：

  $("body").append( $('<div>').append( $('<em>') ) );