Javascript 动态创建 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1867098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript creating <div> on the fly
提问by Udders
I have a a link that looks similar to this
我有一个与此类似的链接
<a href="/home/category/blog/1" id="blog">Blog</a>
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
正如您可以链接的 ID 为“博客”，我想要做的是使用单击的链接中的 ID 动态创建一个 div，因此如果单击“博客”，则标记将是
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
例如，如果点击新闻链接，那么我想，
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.
如果可能，要在标记中创建？以及我对 jQuery 非常陌生。
采纳答案by IProblemFactory
Try this:
尝试这个：
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapperis parent element, work on all aas you see.
未经测试，应该可以工作 ;) 其中：#wrapper是父元素，a如您所见，可以处理所有内容。
回答by cletus
You will need to give the div a different ID. Perhaps you could give it a class instead:
您需要为 div 提供不同的 ID。也许你可以给它一个类：
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
这只是创建 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;
});
As for how to handle multiple such links I would do something like this:
至于如何处理多个这样的链接，我会做这样的事情：
<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>
with:
和：
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div>I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.
关键是这个事件处理程序处理所有链接。它通过用于选择器和 ID 的类来清晰地完成以识别它们，并且避免了过多的 DOOM 操作。如果您希望这些东西中的每一个都单独存在，<div>我会静态地创建它们中的每一个，而不是动态地创建它们。如果您不需要看到它们，请隐藏它们。
回答by Nishant Kumar
Try This :
尝试这个 ：
<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);
});
回答by Tomasz Durka
First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
首先，您不应该制作具有相同 ID 的 2 个元素。在您的示例中，a 和 div 都具有 id="blog"。不符合 XHTML，而且如果您引用它们，可能会弄乱您的 JS 代码。
Here comes non-jquery solution (add this within script tags):
这是非 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
}
Then add to HTML element an "event handler":
然后向 HTML 元素添加一个“事件处理程序”：
<a href="/home/category/blog/1" id="blog" onClick="addDiv(this); return false;">Blog</a>
回答by Yacoby
回答by Chris Van Opstal
Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
不幸的是，如果你点击一个链接，你去的页面不知道你点击的链接的想法是什么。它知道的唯一信息是 URL 中包含的内容。一个更好的方法是使用查询字符串：
<a href="/home/category/blog/1?id=blog">Blog</a>
Then using the jQuery querystring pluginyou could create the div like:
然后使用jQuery 查询字符串插件，您可以创建如下 div：
$("wrapper").add("div").attr("id", $.query.get("id"));
回答by Gausie
You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
您的页面中不应包含具有相同 ID 的元素。如果您愿意，可以使用前缀或类。
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
然而，答案如下。我想象您的可点击链接位于 ID 为“菜单”的 div 中，并且您的动态 div 将在 ID 为“内容”的 div 中创建。
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!
有任何问题，在评论中提问！
回答by Andrei Todorut
Also the following statement is available to create a div dynamically.
以下语句也可用于动态创建 div。
$("<div>Hello</div>").appendTo('.appendTo');
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/
回答by MEAbid
you can try this code
你可以试试这个代码
$('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>