0xD34F

Нормальный способ - воспользоваться специально предназначенным для этого методом:

element.insertAdjacentHTML('beforebegin', html);

Ненормальный - выполнять парсинг строки и добавление узлов раздельно:

element.before(...new DOMParser()
  .parseFromString(html, 'text/html')
  .body
  .childNodes
);

// или

element.parentNode.insertBefore(
  document.createRange().createContextualFragment(html),
  element
);

И, наконец, дикий - перезаписывать разметку элемента:

element.outerHTML = html + element.outerHTML;

А сколько у вас input'ов, чей name оканчивается на "username"? При получении значения метод val возвращает значение первого элемента, а при установке - устанавливает всем. Если input'ов несколько, и вы пытаетесь работать не с первым... ну, получится то, что вы описали.

То, что вы понимаете под словом "символ" - этого в JS нет. Есть строки единичной длины.

Перезаписать вы пытаетесь элемент не массива, а строки. Это невозможно - строки в JS иммутабельны.

Создавайте новую строку:

const titleCase = str => str
  .split(' ')
  .map(n => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase())
  .join(' ');

или

const titleCase = str => str
  .toLowerCase()
  .replace(/(?<=^| +)./g, m => m.toUpperCase());

или

const titleCase = str =>
  ''.concat(...Array.from(str, (n, i) => {
    return n[i && str[~-i] !== ' ' ? 'toLowerCase' : 'toUpperCase']();
  }));

Давайте посмотрим:

(() => {}) instanceof Object // true

Ну да, объект. Кто бы мог подумать.

const obj = {
  a: 69,
  b: 187,
  get c() {
    return this.a + this.b;
  },
};

или

const obj = new Proxy({ a: 69, b: 187 }, {
  get(target, key) {
    return (
      key === 'c' ? target.a + target.b :
      key === 'd' ? target.a * target.b :
      key === 'e' ? target.a - target.b :
                    target[key]
    );
  },
});

Где элементы находятся, что за элементы, как просуммировать, что сделать с суммой:

const container = document;
const selector = 'input[type="checkbox"]';
const sumElements = elements =>
  Array.prototype.reduce.call(elements, (acc, n) => acc + +n.value, 0);
const onSumChange = sum => console.log(sum);

Полный пересчёт суммы при любых изменениях + делегирование:

container.addEventListener('change', function({ target: t }) {
  if (t.matches(selector)) {
    onSumChange(sumElements(this.querySelectorAll(`${selector}:checked`)));
  }
});

container.querySelector(selector).dispatchEvent(new Event('change', { bubbles: true }));

Или, исправление суммы с учётом конкретного чекбокса, изменившего своё состояние + обработчик события цепляется к каждому чекбоксу индивидуально:

const cb = container.querySelectorAll(selector);
let sum = sumElements(Array.prototype.filter.call(cb, n => n.checked));
const onChange = e => onSumChange(sum += e.target.value * [ -1, 1 ][+e.target.checked]);
cb.forEach(n => n.addEventListener('change', onChange));
onSumChange(sum);

el.addEventListener('input', function() {
  this.value = this.value.replace(/[^а-яё\s]/ig, '');
});

str.slice(1).split('&').reduce((acc, n) => (n = n.split('='), acc[n[0]] = n[1], acc), {})

// или

[...str.matchAll(/(\w+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => ({ ...acc, [k]: v }), {})

// или

Object.fromEntries(new URLSearchParams(str))

Сделать объект, где ключами и значениями будут возможные значения stage и соответствующие им значения, передаваемые в emit первым параметром:

const STAGES = {
  2: 'itemGv',
  5: 'itemTm',
};

После этого множество условных операторов внутри цикла можно заменить на один - извлекаем из объекта значение, проверяем, что оно не мусор:

for (const [ key, val ] of Object.entries(items)) {
  const s = STAGES[val.stage];
  if (s) {
    this.client.srem('items', key);
    this.emit(s, val);
  }
}

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from({ length: i + 1 }, (n, i) => i + 1)
    .join(','))
  .join('\n');

console.log(XXX(5));

или

const XXX = length => Array
  .from({ length }, function() {
    this.push(-~this.length);
    return this.join`,`;
  }, [])
  .join`\n`;

или

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from(Array(++i).keys())
    .reduce((acc, n) => acc + (acc && ',') + ++n, ''))
  .reduce((acc, n) => acc + (acc && '\n') + n, '');

const SKILLS = {
  sport: [ 'running', 'squats', 'snowboarding' ],
  music: [ 'guitar', 'drums' ],
};

const filterBySkill = (people, filter) =>
  people.filter(({ skills }) =>
    skills.every(n => filter.some(m => SKILLS[m].includes(n))) &&
    filter.every(n => skills.some(m => SKILLS[n].includes(m)))
  );

const declension = forms => val => (
  val = Math.abs(val) % 100,
  forms[
    [ 2, 0, 1, 1, 1, 2 ]
    [+(val < 5 || 19 < val) && Math.min(val % 10, 5)]
  ]
);

const d = declension([ 'час', 'часа', 'часов' ]);

d(0) // 'часов'
d(2) // 'часа'
d(6191) // 'час'
d(-18) // 'часов'

<div id="time"></div>

function setTimer(el, template) {
  return setInterval(el => {
    const d = new Date();
    const timeData = Object.fromEntries([
      [ 'h', 'getHours' ],
      [ 'm', 'getMinutes' ],
      [ 's', 'getSeconds' ],
    ].map(n => [ n[0], `${d[n[1]]()}`.padStart(2, 0) ]));

    el.innerHTML = template.replace(
      /\$(\w)/g,
      (m, g1) => timeData.hasOwnProperty(g1) ? timeData[g1] : m
    );
  }, 1000, typeof el === 'string' ? document.querySelector(el) : el);
}

const intervalId = setTimer('#time', '<strong>Сейчас</strong> $h:$m:$s');

function sortChildren(el, key) {
  el.append(...Array
    .from(el.children, n => [ n, key(n) ])
    .sort((a, b) => a[1] - b[1])
    .map(n => n[0])
  );
}

sortChildren(document.querySelector('.menu'), n => +n.dataset.num);

Дело в том, что getElementsByTagName возвращает динамическую коллекцию элементов, т.е. такую, которая автоматически обновляется при добавлении/удалении элементов. Поэтому сейчас у вас происходит следующее: удалили элемент с индексом 0, и у всех остальных элементов изменился индекс на единицу вниз, 0 вместо 1, 1 вместо 2 и т.д. При этом счётчик цикла вы на единицу увеличили, так что на следующей итерации удаляете элемент с индексом 1 - бывший 2. А тот, который был 1 и стал 0 - его вы пропускаете. А после следующего удаления пропускаете ещё один. Ну и т.д. Каждый второй.

Какие тут есть варианты действий:

• Замените document.getElementsByTagName("p") на document.querySelectorAll('p'), так вы получите статическую коллекцию элементов.
  
  
• Перебирайте содержимое allP от конца к началу:
  
  

  for (let i = allP.length; i--;) {
    body.removeChild(allP[i]);
  }

  
  
• Удаляйте элемент с нулевым индексом, пока есть что удалять:
  
  

  while (allP.length) {
    allP[0].remove();
  }

  
  
  

Ну и ещё кое-что. Обращаться к body по id - безумие, этот элемент существует в единственном экземпляре и ссылка на него доступна как свойство объекта document. Так что id уберите и замените document.getElementById("body") на document.body.

как улучшить мой код

Подобный код не улучшают, а переписывают.

function fearNotLetter(str) {
  const missing = Array
    .from(str, n => n.charCodeAt(0))
    .find((n, i, a) => n !== a[0] + i);

  return missing && String.fromCharCode(missing - 1);
}

или

function fearNotLetter(str) {
  for (let i = 0, code = str.charCodeAt(0); ++i < str.length;) {
    if (str.charCodeAt(i) !== ++code) {
      return String.fromCharCode(code);
    }
  }
}

https://jsfiddle.net/5wtopLka/

Добавьте collision: 'none' в position.

Делаем просто:

Array.prototype.unique = function() {
  this.splice(0, this.length, ...new Set(this));
  return this;
};

Делаем сложно:

Array.prototype.unique = function(key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set;

  this.forEach(n => (this[keys.size] = n, keys.add(getKey(n))));
  this.length = keys.size;

  return this;
};

[ 1, 1, 1, 2 ].unique() // [1, 2]
[ { id: 3 }, { id: 1 }, { id: 1 }, { id: 3 } ].unique('id') // [{id: 3}, {id: 1}]
[ 'a', 'b', 'c', 'd', 'ab', 'bc' ].unique(n => n.length) // ['a', 'ab']

То и означает - должна корректно обрабатывать слова без гласных.

Есть косяк. Как тут подсказывают, буква "y" считается гласной не всегда.

Ну и длинно как-то, можно же короче:

function translatePigLatin(str) {
  const x = str.search(/[aioue]/);
  return x > 0
    ? `${str.slice(x)}${str.slice(0, x)}ay`
    : `${str}${x ? '' : 'w'}ay`;
}