Question

我有一个类似于此

的链接

<a href="/home/category/blog/1" id="blog">Blog</a>

正如你所知，链接的ID为'博客'，我想要做的是使用点击的链接中的ID动态创建一个div，这样如果点击'博客'，那么标记就会是

<div id="blog">
<!--some content here-->
</div>

如果点击新闻链接就好了，那么我想，

<div id="news">
<!--some content here-->
</div>

如果可能的话，在标记中创建

？以及我对jQuery的新手。

Answer 1

试试这个：

$("a").click(function(){
    $("#wrapper").append("<div id=" + this.id + "></div>");
});

未经测试，应该工作;）其中：#wrapper是父元素，如您所见，可以处理所有a。

Answer 2

您需要为div提供不同的ID。也许你可以给它一个班级：

$("#blog").click(function() {
  $(this).after("<div class='blog'>...</div>");
  return false;
});

这只是创建div的众多方法之一。您可能还想避免重复，但在这种情况下，请使用以下内容：

$("#blog").click(function() {
  var content = $("#blog_content");
  if (content.length == 0) {
    content = $("<div></div>").attr("id", "blog_content");
    $(this).after(content);
  }
  content.html("...");
  return false;
});

至于如何处理多个这样的链接我会做这样的事情：

<a href="#" id="blog" class="content">Blog</a>
<a href="#" id="news" class="content">News</a>
<a href="#" id="weather" class="content">Weather</a>
<div id="content"></div>

使用：

$("a.content").click(function() {
  $("#content").load('/content/' + this.id, function() {
    $(this).fadeIn();
  });
  return false;
});

关键是这一个事件处理程序处理所有链接。它完全用选择器的类和ID来识别它们，它避免了太多的DOOM操作。如果您希望将这些内容中的每一项放在一个单独的<div>中，我将静态地创建每个内容而不是动态创建它们。如果您不需要看它们，请隐藏它们。

Answer 3

试试这个：

<a  id="blog">Blog</a>
<a  id="news">news</a>
<a  id="test1">test1</a>
<a  id="test2">test2</a>

$('a').click(function()
             {
                 $('<div/>',{
                     id : this.id,
                     text : "you have clicked on : " + this.id
                 }).appendTo("#" + this.id);
             });

Answer 4

首先，你不应该使用相同的ID制作2个元素。在你的例子中，a和div都有id =“blog”。不符合XHTML，如果你引用它们，可能会弄乱你的JS代码。

这里有非jquery解决方案（在脚本标记中添加）：

function addDiv (linkElement) {
  var div = document.createElement('div');
  div.id = linkElement.id;
  div.innerHTML = '<!--some content here-->';
  document.body.appendChild(div); // adds element to body
}

然后向HTML元素添加“事件处理程序”：

<a href="/home/category/blog/1" id="blog" onClick="addDiv(this); return false;">Blog</a>

Answer 5

此question描述了如何创建div。但是，不应该具有两个具有相同ID的元素。是否有任何理由不能为其提供content_blog或content_news的身份证明？

Answer 6

不幸的是，如果您点击链接，您转到的页面就不知道您点击的链接的含义是什么。它知道的唯一信息是URL中包含的内容。更好的方法是使用查询字符串：

<a href="/home/category/blog/1?id=blog">Blog</a>

然后使用jQuery querystring plugin你可以创建div：

$("wrapper").add("div").attr("id", $.query.get("id"));

Answer 7

您的网页中不应包含相同ID的元素。如果您愿意，可以使用前缀，也可以使用类。

然而，答案如下。我想象您的可点击链接位于带有“菜单”ID的div中，并且您的动态div将在ID为“content”的div中创建。

$('div#menu a').click(function(){
    $('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});

有任何问题，请在评论中提问！

Answer 8

此外，以下语句可用于动态创建div。

$("<div>Hello</div>").appendTo('.appendTo');

工作小提琴：https://jsfiddle.net/andreitodorut/xbym0bsu/

Answer 9

你可以试试这段代码

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})

#old > div{
  width: 100px;
  background: gray;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

Javascript动态创建<div> </div>

9 个答案: