Create a new DIV within an existing DIV using JavaScript

Question

Is there a way to create a new div within an existing div using JavaScript?

I'd like the following to happen:

Create a new div with class="three" and put it inside div class="one".
Create a new div with class="text" and put it inside class="three" and add the text 'this is sample text'.

The end result should look like this:

.two{
  width:700px;
  height: 600px;
  background-color: yellow;
}

.three{
  width:300px;
  height: 200px;
  transform: translate(50%, -250%);
  background-color: red;
}
.text{
  text-align: right;
  transform: translate(-5%, 440%);
  color: black;
}

<div class="one">
  <div class="two">
  </div>
</div>

Dima · Accepted Answer · 2019-02-08 09:19:35Z

1

// get a reference to the first div by using its class as search path
var divOne = document.querySelector('.one');
// create a new element
var divThree= document.createElement('DIV');
// add a class 'three' to a newly created element
divThree.classList.add('three');
// and add a newly created element to divOne
divOne.appendChild(divThree);

// now create a div for text, set its class to 'text' and append it to divThree
var txt = document.createElement('DIV');
txt.classList.add('text');
txt.innerHTML = 'this is sample text';
divThree.appendChild(txt);

.two{
  width:700px;
  height: 600px;
  background-color: yellow;
}

.three{
  width:300px;
  height: 200px;
  transform: translate(50%, -250%);
  background-color: red;
}
.text{
  text-align: right;
  transform: translate(-5%, 440%);
  color: black;
}

<div class="one">
  <div class="two">
  </div>
</div>

answered Feb 8, 2019 at 9:19

Dima

1,76115 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StudioTime Over a year ago

If it's just text you can also use txt.innerText

StudioTime · Accepted Answer · 2019-02-08 12:00:10Z

0

Using jquery you can write the below code.

$(document).ready(function(){
    $(".one").html("<div class='three'><div class='text'>This is a sample text</div><div>");
});

edited Feb 8, 2019 at 12:00

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

answered Feb 8, 2019 at 9:32

Fulu

231 silver badge4 bronze badges

Collectives™ on Stack Overflow

Create a new DIV within an existing DIV using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related