// создаем элемент h1
const h1 = document.createElement('h1');
h1.textContent = 'Hello World';
// ...и добавляем его в body
document.body.appendChild(h1);

// обновляем текст элемента h1
h1.textContent = 'Bye World';

// наконец, мы удаляем элемент h1
document.body.removeChild(h1);

const h1 = document.createElement('h1');
h1.textContent = 'Hello World';
// добавляем класс к элементу h1
h1.setAttribute('class', 'abc');
// ...и добавляем тег <style> в head
const style = document.createElement('style');
style.textContent = '.abc { color: blue; }';
document.head.appendChild(style);
document.body.appendChild(h1);

const button = document.createElement('button');
button.textContent = 'Click Me!';
// слушаем событие click
button.addEventListener('click', () => {
  console.log('Hi!');
});
document.body.appendChild(button);

<h1>Hello World</h1>

<style>
  h1 {
    color: rebeccapurple;
  }
</style>
<h1>Hello World</h1>

<script>
  let name = 'World';
</script>
<h1>Hello {name}</h1>

<script>
  let count = 0;
  function onClickButton(event) {
    console.log(count);
  }
</script>
<button on:click={onClickButton}>Clicked {count}</button>

<script>
  let count = 0;
  function onClickButton(event) {
    count += 1;
  }
</script>
<button on:click={onClickButton}>Clicked {count}</button>

<h1>Hello World</h1>

function create_fragment(ctx) {
  let h1;
  return {
    c() {
      h1 = element('h1');
      h1.textContent = 'Hello world';
    },
    m(target, anchor) {
      insert(target, h1, anchor);
    },
    d(detaching) {
      if (detaching) detach(h1);
    },
  };
}
export default class App extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

h1 = element('h1');
h1.textContent = 'Hello World';

insert(target, h1, anchor);
// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.ts
export function insert(target, node, anchor) {
  target.insertBefore(node, anchor || null);
}

detach(h1);
// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.ts
function detach(node) {
  node.parentNode.removeChild(node);
}

<!-- empty -->

class App extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, null, safe_not_equal, {});
  }
}

<script>
  let name = 'World';
</script>
<h1>Hello {name}</h1>

function create_fragment(ctx) {
  // ...
  return {
    c() {
      h1 = element('h1');
      h1.textContent = `Hello ${name}`;},
    // ...
  };
}
let name = 'World';
class App extends SvelteComponent {
  // ...
}

<script>
  let name = 'World';
  function update() {
    name = 'Svelte';
  }
</script>
<h1>Hello {name}</h1>

function create_fragment(ctx) {
  return {
    c() {
      h1 = element('h1');
      t0 = text('Hello ');
      t1 = text(/*name*/ ctx[0]);
    },
    m(target, anchor) {
      insert(target, h1, anchor);
      append(h1, t0);
      append(h1, t1);
    },
    p(ctx, [dirty]) {
      if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
    },
    d(detaching) {
      if (detaching) detach(h1);
    },
  };
}
function instance($$self, $$props, $$invalidate) {
  let name = 'World';
  function update() {
    $$invalidate(0, (name = 'Svelte'));
  }
  return [name];
}
export default class App extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, instance, create_fragment, safe_not_equal, {});
  }
}

<App />
<App />
<App />
<!-- выведет -->
<h1>Hello world</h1>
<h1>Hello world</h1>
<h1>Hello world</h1>

<App />
<App />
<App />
<!-- может быть -->
<h1>Hello world</h1>
<h1>Hello Svelte</h1>
<h1>Hello world</h1>
<!-- в зависимости от внутреннего состояния компонента -->

// концептуально,
const ctx = instance(/*...*/);
const fragment = create_fragment(ctx);
// создаем фрагмент
fragment.c();
// монтируем фрагмент в DOM дерево
fragment.m(target);

t1 = text(/* name */ ctx[0]);

name = 'Svelte';
count++;
foo.a = 1;
// скомпилируется в примерно такой код
name = 'Svelte';
$$invalidate(/* name */, name);
count++;
$$invalidate(/* count */, count);
foo.a = 1;
$$invalidate(/* foo */, foo);

// концептуально...
const ctx = instance(/*...*/);
const fragment = create_fragment(ctx);
// чтобы отслеживать, какая переменная изменилась
const dirty = new Set();
const $$invalidate = (variable, newValue) => {
  // обновляем ctx
  ctx[variable] = newValue;
  // помечаем переменную как грязную
  dirty.add(variable);
  // планируем обновление для компонента
  scheduleUpdate(component);
};
// вызывается, когда запланировано обновление
function flushUpdate() {
  // обновить фрагмент
  fragment.p(ctx, dirty);
  // очистить список помеченных переменных
  dirty.clear();
}

<script>
  let name = 'world';
  function update() {
    name = 'Svelte';
  }
</script>
<h1 on:click={update}>Hello {name}</h1>

function create_fragment(ctx) {
  // ...
  return {
    c() {
      h1 = element('h1');
      t0 = text('Hello ');
      t1 = text(/*name*/ ctx[0]);
    },
    m(target, anchor) {
      insert(target, h1, anchor);
      append(h1, t0);
      append(h1, t1);
      dispose = listen(h1, 'click', /*update*/ ctx[1]);},
    p(ctx, [dirty]) {
      if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
    },
    d(detaching) {
      if (detaching) detach(h1);
      dispose();},
  };
}
function instance($$self, $$props, $$invalidate) {
  let name = 'world';
  function update() {
    $$invalidate(0, (name = 'Svelte'));
  }
  return [name, update];}
// ...

<h1
  on:click={update}
  on:mousedown={update}
  on:touchstart={update}>
  Hello {name}!
</h1>

// ...
dispose = [
  listen(h1, 'click', /*update*/ ctx[1]),
  listen(h1, 'mousedown', /*update*/ ctx[1]),
  listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true }),
];
// ...
run_all(dispose);

// вместо вот такого
dispose1 = listen(h1, 'click', /*update*/ ctx[1]);
dispose2 = listen(h1, 'mousedown', /*update*/ ctx[1]);
dispose2 = listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true });
// ...
dispose1();
dispose2();
dispose3();