javascript - DOM 修改疯狂

Question

我有这个函数，我想创建一个带有两个子div的容器div，一个是容器的标题，另一个是内容。由于某种原因，当我在 jsfiddle 中测试它时，这不起作用。

另外，我想知道如何将整个容器附加到我的 html 中具有特定类的 div 中。

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或document.querySelector获取该类的 div，然后附加到它而不是 document.body。但请确保that the element is already available在执行代码之前进行选择。