javascript - DOM modification madness

Question

I have this function, which I want to create a container div with two child divs, one being the title of the container and the other one being the content. For some reason, this is NOT working when I test it in jsfiddle.

Also, I would like to know how to append this whole container to a div with a specific class in my html.

var add = function(title, content) {
  var addContainerBody = document.createElement("DIV");
  addContainerBody.className = "c-body";
  var addTitle = document.createElement("DIV");
  var titleText = document.createTextNode(title);
  addTitle.appendChild(titleText);
  addTitle.className = "title";
  var addContent = document.createElement("DIV");
  var contentText = document.createTextNode(content);
  addContent.className = "content";
  addContainerBody.appendChild(addTitle);
  addContainerBody.appendChild(addContent);
  document.body.appendChild(addContainerBody);
};

// Callin it //

add("Title","Text");

As you can see, it outputs only the title, and nothing else. I am probably missing something very obvious. What is the issue here?

Using the shadowDOM would be more effective here, ReactJS would be easiest if you want to abstract to a framework. — marblewraith, Jul 06 '15 at 00:51
I don't know what that is and for this project I cannot use a seperate framework or plugin. — Sebastian Olsen, Jul 06 '15 at 00:55
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM — marblewraith, Jul 06 '15 at 01:05

score 2 · Accepted Answer · edited May 23 '17 at 11:43

am probably missing something very obvious.

You're never appending the contentText to the addContent element.

function add(title, content) {
  var addContainerBody = document.createElement("DIV");
  addContainerBody.className = "c-body";

  var addTitle = addContainerBody.appendChild(document.createElement("DIV"));
  addTitle.className = "title";
  addTitle.appendChild(document.createTextNode(title));

  var addContent = addContainerBody.appendChild(document.createElement("DIV"));
  addContent.className = "content";
  addContent.appendChild(document.createTextNode(content));

  document.body.appendChild(addContainerBody);
}

add("Title","Text");

I would like to know how to append this whole container to a div with a specific class in my html.

You can use document.getElementsByClassName or document.querySelector to get the div with that class, and then append to it instead of document.body. But make sure that the element is already available to be selected before executing your code.

@SebastianOlsen: Uh, I didn't spot that. Better ask only one question per post :-) — Bergi, Jul 06 '15 at 00:55
I tried googling it and couldn't find an answer, and stackoverflow will only let you ask one question in a set interval. — Sebastian Olsen, Jul 06 '15 at 00:57

javascript - DOM modification madness

1 Answers1