create div with an inner div with javascript

Question

I've been looking for a way to create a div with a div inside to create a box with a header with javascript.

ie.

<div>title<div>content</div></div>

The code I have

function addpost() {
  var div = document.createElement("div");
  div.id = "item";
  var t = document.createTextNode("title<div>content</div>");
  div.appendChild(t);
  if (inputValue === '') {
    alert("cannot be empty");
  } else {
   document.getElementById("myUL").appendChild(div);
  }
}

The result that I have been getting ends up in the webpage. :(

title<div>content</div>

document.getElementById("myUL").innerHTML='<div>title<div>content</div></div>'; — gurvinder372
– gurvinder372, Commented Apr 24, 2017 at 9:23
Trying to make it dynamic. That would just erase my previous content right? I would like it to add on. — user3435505
– user3435505, Commented Apr 24, 2017 at 9:25
document.getElementById("myUL").insertAdjacentHTML("beforeEnd", "<div>title<div>content</div></div>"); — Andreas
– Andreas, Commented Apr 24, 2017 at 9:30
I think I found what was wrong, let me know if my answer worked for you :) — Webeng
– Webeng, Commented Apr 24, 2017 at 9:38

Baraka · Accepted Answer · 2017-04-24 09:29:43Z

1

Try this

function addpost() {
  var div = document.createElement("div");
  div.id = "item";
  var t = document.createTextNode("title");
  div.appendChild(t);
  var x = document.createElement("div");
  var y = document.createTextNode("content");
  x.appendChild(y);
  div.appendChild(x);
  document.getElementById("myUL").appendChild(div);
}

answered Apr 24, 2017 at 9:29

Baraka

3745 silver badges19 bronze badges

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

Comments

Webeng · Accepted Answer · 2017-04-24 09:49:59Z

1

1st Problem:

You forgot to include inputValue as a parameter in the function. You manually included the text to include with this line: var t = document.createTextNode("title<div>content</div>"); when you should have done var t = document.createTextNode(inputValue);

This code should work for you:

function addpost(inputValue) {
  var div = document.createElement("div");
  div.id = "item";
  var t = document.createTextNode(inputValue);
  div.appendChild(t);
  if (inputValue === '') {
    alert("cannot be empty");
  } else {
   document.getElementById("myUL").appendChild(div);
  }
}
addpost("title<div>content</div>");

2nd Problem

You are inserting "title<div>content</div>" as text. This means the tags will not be considered as code, but will be escaped. To fix this, what you make var t another node, and include the text within var t.

This code should work for you:

   function addpost(titleInput, inputValue) {
      var div = document.createElement("div");
      div.id = "item";
      var t = document.createElement("div");
      t.id = "text";
      var t2 = document.createTextNode(inputValue);
      t.appendChild(t2);
      div.appendChild(document.createTextNode(titleInput));
      div.appendChild(t);
      if (inputValue === '') {
        alert("cannot be empty");
      } else {
       document.getElementById("myUL").appendChild(div);
      }
    }
    addpost("title","content");

edited Apr 24, 2017 at 9:49

answered Apr 24, 2017 at 9:37

Webeng

7,0984 gold badges37 silver badges61 bronze badges

1 Comment

user3435505 Over a year ago

thanks for the help, however Baraka posted the first working response and the second way you submitted works. However, the first one didn't work :(. upvoted though since it was correct.

Susi · Accepted Answer · 2017-04-24 09:28:48Z

0

For adding the content dynamically without deleting the content that was set there before, you also add it like this:

 div.innerElement = div.innerElement + "here comes the new stuff";

answered Apr 24, 2017 at 9:28

Susi

12 bronze badges

Collectives™ on Stack Overflow

create div with an inner div with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related