title: how to tell elm about external DOM changes
body: <p>I'm using elm 0.17.1 and trying to interop with select2 javascript library(version 4.0.3), here is my Main.elm :</p>
  
  <pre><code>port module Main exposing (..)
  
  import Html exposing (Html,select,option,div,text,br)
  import Html.App as App
  import Html.Attributes exposing (id,value,width)
  -- MODEL
  
  type alias Model =
    {
       country : String
    }
  
  
  -- UPDATE
  
  type Msg =
        Select String
  
  update : Msg -&gt; Model -&gt; (Model, Cmd Msg)
  update msg model =
    case msg of
      Select str -&gt; (Model str,Cmd.none)
  
  
  -- VIEW
  
  view : Model -&gt; Html Msg
  view model =
    div[]
    [
      select [id "myselect"]
      [
       option [value "US"] [text "United States"],
       option [value "UK"] [text "United Kingdom"]
      ],
      text model.country
    ]
  
  -- SUBSCRIPTIONS
  
  port selection : (String -&gt; msg) -&gt; Sub msg
  
  subscriptions : Model -&gt; Sub Msg
  subscriptions _=
    selection Select
  
  
  port issueselect2 : String -&gt; Cmd msg
  
  -- INIT
  
  init : (Model, Cmd Msg)
  init =
    ({country=""},issueselect2 "myselect")
  
  main : Program Never
  main = App.program {init=init,view=view,update=update,subscriptions=subscriptions}
  </code></pre>
  
  <p>and the javascript side :</p>
  
  <pre><code>$(document).ready(function()
       {
          var app=Elm.Main.fullscreen();
          app.ports.issueselect2.subscribe(function(id)
          {
             $('#'+id).select2().on('change',function(e)
             {
                app.ports.selection.send(e.target.value);
             });
          })
       })
  </code></pre>
  
  <p>Right now when I select a country an Uncaught type error in my chromium's console appears saying that <code>domNode.replaceData</code> is not a function(it is actually undefined).</p>
  
  <p>The problem is that select2 adds a span to the DOM and Elm doesn't know about it, inspecting <code>domNode</code> reveals that Elm tries to update the <code>span</code> when it should update the text.</p>
  
  <p>I suppose I need effects but I don't know how to use them in my particular usecase.</p>
  
  <p>How to solve my problem ?</p>
  
  <p>for the record I'm using jquery 3 , I compile my elm program into main.js and I load the js files in this order : jquery.min.js, select2.min.js,main.js then the above js code .</p>
  
  <p>I couldn't debug this with elm-reactor because it seems to only work with elm code not js code.</p>