javascript - DOM 疯狂修改

Question

我有这个功能，我想用两个child div创建一个容器div，一个是容器的标题，另一个是内容.出于某种原因，当我在 jsfiddle 中测试它时，它不起作用。

此外，我想知道如何将整个容器附加到 div，并在我的 html.[=26= 中使用特定的 class ]

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");

如您所见，它只输出标题，没有其他任何内容。我可能遗漏了一些非常明显的东西。这里有什么问题？

Answer 1

am probably missing something very obvious.

您永远不会将 contentText 附加到 addContent 元素。

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.

您可以在执行代码之前使用 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 进行选择。