Js вынести за пределы дива?

141

22 февраля 2019, 14:50

есть код

function createElementsInside() {
    var colorArray2 = document.body.getElementsByClassName("container");
    for (var i = 0; i < colorArray2.length; i++) {
        var innerHtml = "";
        for (var j = 0; j < 3; j++) {
            innerHtml += '<div class="element">Element</div>';
        }
        innerHtml += '<input id="btn" type="button" value="+">';
        colorArray2[i].innerHTML = innerHtml;
        console.log(colorArray2[i])
    }
}

Как input вынести за пределы дива.

сейчас в консоль выводить так:

<div class="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>
    <input id="btn" type="button" value="+">
</div

а, нужно так

<div class="container">
    <div class="element">Element</div>
    <div class="element">Element</div>
    <div class="element">Element</div>      
</div>
<input id="btn" type="button" value="+">

Переделал из вопроса Как вставить div Что не так?

Answer 1

function createElementsInsideAndButton() { 
  var colorArray2 = document.body.getElementsByClassName("container"); 
  for (var i = 0; i < colorArray2.length; i++) { 
    var innerHtml = ""; 
    for (var j = 0; j < 3; j++) { 
      innerHtml += '<div class="element">Element</div>'; 
    } 
    colorArray2[i].innerHTML += innerHtml; 
 
    var btn = document.createElement("input"); 
    btn.id = "btn"; // wrong - duplicate id's 
    btn.setAttribute("type", "button"); 
    btn.value = "+"; 
    colorArray2[i].parentNode.insertBefore(btn, colorArray2[i].nextSibling); 
  } 
}

.container { 
  border: 1px solid black; 
  width: 300px; 
  height: 100px; 
  padding: 10px; 
} 
 
.element { 
  border: 1px solid black; 
  width: 60px; 
  height: 30px; 
  background: lightgreen; 
  display: inline-block; 
  margin: 5px; 
}

<button onclick="createElementsInsideAndButton()" type="button">Create Elements Inside</button> 
<div class="container"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

DataTable fixed column горизонтальный скролл

Фиксированные два ряда левый и правый крайний, но правый фиксированный ряд имеет отступ от правого края, я думаю из-за вертикального скролла,...

154

javascript

Условие с true / false

Есть условие на проверку существует ли вообще поле, и если поле существует мы его обрабатываем, но столкнулся с очень удивительным результатомВ...

150

javascript

Динамическое размещение элементов в svg

Как в SVG на равных расстояниях друг от друга (статично) разместить несколько генерируемых окружностей по периметру прямоугольника(с заданными...

158

javascript

Как уменьuить изображения и отступы в jQuery Carousel Evolution?

Есть карусель-гармошка фидл, построенная на базе jQuery - Carousel Evolution

164