Js Как добавить div в Div

217

21 февраля 2019, 21:00

Есть див

<div class=”container”></div>

нужно создать ещё 3 дива в диве с классом container, названием, и (позицией тега ) вот это во обще не понял. пробовал сделать так:

var colorArray2 = document.getElementsByClassName('container');
var element = ('<div class="element">Element</div>');
var colorArray2 = document.body.getElementsByClassName("container");
for(var i = 0; i < colorArray2.length; i++) {
    for(var j = 0; j < 3; j++) {
        var div = document.createElement(element);
        colorArray2[i].appendChild(element);
        console.log(colorArray2[i])
    }
}

Не работает. Ругается на эту строчку var element = ('<div class="element">Element</div>');

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div class="element">Element</div>') is not a valid name.
    at HTMLDocument.createElement (<anonymous>:1:1554)
    at http://localhost:63342/JsTest/script.js:116:28
(anonymous) @ VM464:1
(anonymous) @ script.js:116

Как это можно сделать? Если можно то пример на js и jquery.

Answer 1

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>'; 
    } 
    colorArray2[i].innerHTML = innerHtml; 
  } 
}

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

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

function createElementsInside() { 
  var colorArray2 = document.body.getElementsByClassName("container"); 
  for (var i = 0; i < colorArray2.length; i++) { 
    colorArray2[i].innerHTML = ""; 
    for (var j = 0; j < 3; j++) { 
      var div = document.createElement("div"); 
      div.setAttribute("class", "element"); 
      div.textContent = "Element"; 
      colorArray2[i].appendChild(div); 
    } 
  } 
}

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

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

function createElementsInside() { 
  var innerHtml = ""; 
  for (var j = 0; j < 3; j++) { 
    innerHtml += '<div class="element">Element</div>'; 
  } 
  $(".container").html(innerHtml); 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"></div> 
<button onclick="createElementsInside()" type="button">Create Elements Inside</button>