добавление элемента для элементов в js

Question

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

Изначально есть такой блок:

<div>
<div className="examp">
    <span class="div_1">test</span>
    <span class="div_2">тест</span>
</div>
<div className="examp">
    <span class="div_1">test 1</span>
    <span class="div_2">тест 1</span>
</div>

После загрузки страницы надо чтобы было так

<div>
<div className="examp">
    <span class="added_ellement" onClik="function(сюда передать содержимое блока div_1 (test))">test</span>
    <span class="div_1">test</span>
    <span class="div_2">тест</span>
</div>
<div className="examp">
    <span class="added_ellement" onClik="function(сюда передать содержимое блока div_1 (test 1))">test</span>
    <span class="div_1">test 1</span>
    <span class="div_2">тест 1</span>
</div>

Начал писать скрипт, но что-то не получается. Вот мои наработки

let ellements = document.getElementsByClassName('div_1');
for(let i in el) {
    let div = document.createElement("div");
    div.innerHTML = '<div onClick="function(' + el[i].innerText + ') + '">click</div>' ';
    el[i].append(div);
}

Answer 1

• Откуда взялся el ? Нельзя называть переменную ellements а потом взять и сократить её. Или везде el или везде ellements

• let i in el — in используется для перебора обычных объектов. Нельзя так перебирать список HTML-элементов, потому что вот:

let body = document.querySelectorAll('body');
for( let key in body ){
  console.log(key);
}

• onclick="function(...)" — Ключевое слово function используется для объявления функции, а не её вызова... Будет ошибка.

• getElementsByClassName('класс') возвращает "живой" список элементов, который будет обновляться после любого действия с его элементами. А такое поведение нигде особо не нужно, поэтому сейчас вместо него используют querySelectorAll('.класс') - один раз собирает элементы и всё.

→ https://learn.javascript.ru/
→ https://developer.mozilla.org/ru/

let div = document.querySelectorAll('.div_1');
for( let i = 0; i < div.length; i++ ){
  let span = document.createElement('span');
  span.className = "added_ellement";
  span.textContent = "Text №" + i;
  
  span.addEventListener('click', function(){
    span.insertAdjacentText('beforeEnd', div[i].textContent );
  });
  
  div[i].insertAdjacentElement('beforeBegin', span);
}

.added_ellement {
  display: inline-block;
  border: 1px solid orange;
  margin: 5px; padding: 5px;
  cursor: pointer;
  user-select: none;
}

<div className="examp">
  <span class="div_1"> - 000 - </span>
  <span class="div_2">тест - 0</span>
</div>
<div className="examp">
  <span class="div_1"> - 111 - </span>
  <span class="div_2">тест - 1</span>
</div>
<div className="examp">
  <span class="div_1"> - 222 - </span>
  <span class="div_2">тест - 2</span>
</div>

Answer 2

let elms = [...document.querySelectorAll('.examp')];

elms.forEach(el => {
  let newEl = document.createElement('span');
  newEl.classList.add('div_3');
  newEl.textContent = 'newElem';
  el.insertAdjacentElement('afterbegin', newEl);
});

.div_1,
.div_2,
.div_3 {
  position: relative;
  margin: 20px;
  background-color: blue;
}

<div class="examp">
    <span class="div_1">test</span>
    <span class="div_2">тест</span>
</div>
<div class="examp">
    <span class="div_1">test 1</span>
    <span class="div_2">тест 1</span>
</div>

БЛОГ НА HUSL

добавление элемента для элементов в js

Ответы (2 шт):