Javascript 即时创建 <div>
Posted
技术标签:
【中文标题】Javascript 即时创建 <div>【英文标题】：Javascript creating <div> on the fly 【发布时间】：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 冲突吗？ 您希望在当前页面上创建新标记吗？还是链接重定向到的页面？ 如果你想用一个属性引用两个不同的东西，请改用类属性。 【参考方案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>【讨论】：
以上是关于Javascript 即时创建 <div>的主要内容，如果未能解决你的问题，请参考以下文章