Javascript 即时创建 <div>答案

【问题标题】：Javascript creating <div> on the flyJavascript 即时创建 <div>
【发布时间】：2010-12-24 10:30:08
【问题描述】：

我有一个与此类似的链接

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

链接的 ID 为“博客”，我想做的是动态创建一个 div，其 ID 来自单击的链接，因此如果单击“博客”，则标记将是

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

同样，如果点击新闻链接，那么我想，

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

如果可能的话，要在标记中创建吗？以及我对 jQuery 是多么陌生。

【问题讨论】：

您希望两个不同的 DOM 元素具有相同的 ID？你确定吗？
你想要两个元素的 id 冲突吗？
您希望在当前页面上创建新标记吗？还是链接重定向到的页面？
如果你想用一个属性引用两个不同的东西，请改用类属性。

标签： javascript jquery

【解决方案1】：

试试这个：

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

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

【讨论】：

ID 属性必须像其他人所说的那样是唯一的 (w3.org/TR/html401/struct/global.html#h-7.5.2)... 如果您想要相同的 ID，我想是在创建它之后在某处引用它？ w3c 未定义引用重复 ID，上帝知道不同的浏览器将如何在它们之间进行选择。我建议您将这种技术与 class 属性一起使用。
当this.id 可以使用时不要使用$(this).attr('id')。即使在那之后，这仍然是一个糟糕的答案，因为重复的 id 属性。

【解决方案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> 中，我会静态地创建它们，而不是动态地创建它们。如果您不需要查看它们，请隐藏它们。

【讨论】：

+1 获取详细示例和其他处理方式

【解决方案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);
             });

【讨论】：

【解决方案4】：

首先，您不应该创建 2 个具有相同 ID 的元素。在您的示例中，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>

【讨论】：

【解决方案5】：

这个question 描述了如何创建一个div。但是，您不应该有两个具有相同 ID 的元素。你有什么理由不能给它一个像content_blog或content_news这样的ID吗？

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

您的页面中不应包含具有相同 ID 的元素。如果你愿意，可以使用前缀，或者可以使用一个类。

但是，答案如下。我想象您的可点击链接位于 ID 为“menu”的 div 中，而您的动态 div 将在 ID 为“content”的 div 中创建。

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

有什么问题，在cmets中提问！

【讨论】：

【解决方案8】：

以下语句也可用于动态创建 div。

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

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

【讨论】：

【解决方案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>

【讨论】：