Question

点击div时，我正在尝试向网页添加新的NEW DIV？

我怎么能这样做？有人能指出我正确的方向吗？

Answer 1

更多示例代码总是有用，但我会尝试给你一些基础知识。

<div id="Content">
  <button id="Add" />
</div>

$(function () {
  $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

Answer 2

有许多不同的方式，这取决于你想做什么。一个简单的方法是这样的：

$('#id').html('<div>Hello</div>')

将id为“id”的项的内部html替换为“Hello”。所以这个：

<div id='id'>Old Html </div>

会变成：

<div id='id'><div>Hello</div></div>

而且：

$('#id').after('<div>Hello</div>')

将“旧Html”转换为：

<div id='id'>Old Html</div>
<div Hello </div>

查看www.visualjquery.com并选择操作按钮。它以易于探索的方式为您提供超出您需要的知识。

Answer 3

确保在jQuery中使用$(document).ready函数。一旦页面加载，您需要这个“运行”脚本，并启用在此虚拟按钮上调用的操作，以将新div附加到现有div。

您还可以使用此选项通过使用jQuery选择器（例如.class或#id）将您喜欢的任何内容附加到页面上的其他元素。

<div id="Content">
  <button id="Add" />
</div>

$(document).ready(function() {
    $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

另一个有用的选择是用jQuery替换标记的内容。您可以使用.html()功能执行此操作。

<div id="Content">
      <p id="changed">Hello World!</p>
      <button id="change_content" />
</div>

$(document).ready(function() {
    $('#change_content').click(function () {
        $('#changed').html('Goodbye World');
    });
});

希望这有帮助！

如何在jQuery中添加更多div

3 个答案: