Question

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

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

＆＃13;

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

＆＃13;

如您所见，它仅输出标题，而不输出任何其他内容。我可能错过了一些非常明显的东西。这是什么问题？

Answer 1

我可能错过了一些非常明显的事情。

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

＆＃13;

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

＆＃13;

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

您可以使用document.getElementsByClassName或document.querySelector获取该类的div，然后将其附加到document.body。但请确保在执行代码之前选择that the element is already available。

javascript - DOM修改疯狂

1 个答案: