Question

这很难解释，但我会尽我所能。我想编写一个带有两个参数（标题，内容）的Javascript函数，并在<div>标记中创建一个<body>标记。 <div>标记应该如下所示。

<div>
  <h2>title</h2>
  <p>content</p>
</div>

我的javascript代码如下所示：

function addElement (title, content) {
   var newDiv = document.createElement("div");
   var newH2 = document.createElement("h2");
   var title = document.createTextNode(header);
   newH2.appendChild(title);
   var p = document.createElement("p");
   var post = document.createTextNode(entry);
   p.appendChild(post);
   newDiv.appendChild(newH2);
   newDiv.appendChild(p);

   // Missing codes here...
}

我不知道如何完成我的方法。因为我的页面中有几百个标签，我希望这个新标签（当用户进行新输入时）会出现在html代码页中间某处的同一个地方，以保持组织有序。

Answer 1

如果你想使用jQuery，请看一下这个小提琴：http://jsfiddle.net/panpymq2/

在我的小提琴中，我正在按下按钮。然后我将appends新生成的html方法调用到页面的body。您可以在CSS3选择器附加新HTML的位置输入更改。只需修改$("insert selector there").append...

即可

<强>更新
根据新的要求，我更新了我的小提琴：http://jsfiddle.net/panpymq2/1/

我现在prepend新的html到文档。

Answer 2

您已经知道如何添加元素作为其他元素的子元素。这就是您用来将h2和p添加到div的内容。您可以使用相同的appendChild将div添加到文档中：

document.body.appendChild(newDiv);

但是你不希望它出现在页面底部 - 你想要它＆＃34;在html代码页的中间＆＃34;。一种直接的方法是将newDiv添加到位于页面中间正确位置的容器中。

您首先要在页面HTML中创建此容器：

<!doctype html>
<body>
  <p>stuff before</p>
  <div id="container"></div>
  <p>stuff after</p>
</body>

然后，使用以下内容完成addElement

document.getElementById('container').appendChild(newDiv);

Answer 3

一种方法是，如果addElement采用了第三个参数，即你想要在/内插入新元素的兄弟/父。

function addElement(title, content, target) {
  ...
  target.insertAdjacentElement('afterend', newDiv);
  // or
  target.appendChild(newDiv);
}

Answer 4

我认为这与HTML问题一样多。我有同样的问题。

解决此问题的一种方法是制作（额外）容器<div>，如下所示：

<div id="outer_container_elems">
     <div id="inner_container_elems">
           ...
     </div>
</div>

并附加到inner_container_elems

希望这有帮助！

Javascript：在标签中创建一个新的div

4 个答案: