Question

我一直在寻找一种方法来创建一个带有div的div来创建一个带有javascript标题的框。

即。

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

我的代码

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

我最终在网页上得到的结果。：（

title<div>content</div>

Answer 1

试试这个

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

Answer 2

第一个问题：

您忘记在函数中包含 inputValue 作为参数。您手动将文字包含在此行中var t = document.createTextNode("title<div>content</div>");应该完成var t = document.createTextNode(inputValue);

此代码适用于您：

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

第二个问题

您正在插入"title<div>content</div>"作为文字。这意味着标签不会被视为代码，但会被转义。要解决此问题，请将var t另一个节点设为var t，并将其包含在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");中。

此代码适用于您：

WindowContent

Answer 3

要动态添加内容而不删除之前设置的内容，您还可以这样添加：

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

使用javascript创建带有内部div的div

3 个答案: