ArcGIS API 4.11 Custom Zomm Button

Den-GIS

I need a custom zoom button for my project with the arcgis api 4.11. I found this example for 3.x series: 

<SPAN class="" style="border: 0px; font-weight: inherit;">on</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">dom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">byId</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">"zoomInBtn"</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">),</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">"click"</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">,</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit;">function</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">evt</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">){</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">map</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">setZoom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">map</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">getZoom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">()+</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">1</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">);});</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">on</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">dom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">byId</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">"zoomOutBtn"</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">),</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">"click"</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">,</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit;">function</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">evt</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">){</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">map</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">setZoom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">map</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">getZoom</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">()-</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit;">1</SPAN><SPAN class="" style="border: 0px; font-weight: inherit;">);});</SPAN><CODE><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">   </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">var</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">;</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-weight: inherit; font-size: 13px;">// esri map initialization</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">require</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">([</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"esri/map"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"esri/geometry/Point"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"esri/symbols/SimpleMarkerSymbol"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"esri/graphic"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"dojo/domReady!"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">],</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">Map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">Point</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">SimpleMarkerSymbol</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">SimpleLineSymbol</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">Graphic</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">Color</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">)</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">            map </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-weight: inherit; font-size: 13px;">Map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"map"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">            center</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">[</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">],</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">            zoom</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">5</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">            basemap</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"topo"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">            slider</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">true</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-weight: inherit; font-size: 13px;">// set to false to remove default zoom buttons</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">        </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">});

</SPAN>

Is it possible to implement something like that with arcgis api 4.11. ?

RobertScheitlin__GISP

Denis,

  Then this is what you are looking for:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta
      name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN>
      content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Home Button <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.11</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
      
      <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>widget<SPAN class="operator token">--</SPAN>button<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>widget<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>interactive<SPAN class="punctuation token">.</SPAN>home <SPAN class="punctuation token">{</SPAN>
        border<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> solid 1px #e0e0e0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.11/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.11/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> 
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> 
        <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
          Map<SPAN class="punctuation token">,</SPAN> 
          MapView<SPAN class="punctuation token">,</SPAN> 
          query<SPAN class="punctuation token">,</SPAN>
          domConstruct<SPAN class="punctuation token">,</SPAN>
          on<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">65</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> zoomInBtn <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.esri-component.esri-zoom.esri-widget>div'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> homeBtn <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<div class='esri-widget--button esri-widget esri-interactive home' role='button' title='Home Extent'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-home'></span></div>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>homeBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Home Extent Button Clicked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>homeBtn<SPAN class="punctuation token">,</SPAN> zoomInBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>