how to tell elm about external DOM changes
<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>