Javascript 使用jquery动态创建元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14725248/
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
dynamically create element using jquery
提问by DrWooolie
I am trying to create element using jquery. When i click on a link, i want to create an element "p", give it some text, and then put it in one of my divs. Also, i want to check which link is clicked on, so i can put the created "p" in the right div. Any solutions on where i am doing it wrong?
我正在尝试使用 jquery 创建元素。当我点击一个链接时，我想创建一个元素“p”，给它一些文本，然后把它放在我的一个 div 中。另外，我想检查点击了哪个链接，以便我可以将创建的“p”放在正确的 div 中。关于我在哪里做错的任何解决方案？
Javascript/Jquery
Javascript/Jquery
$(document).ready(function () {
function createElement() {
var a = $("#menu").find('a').each(function(){
if(a == "l1"){
var text = $(document.createElement('p');
$('p').text("Hej");
$("#contentl1").append("text");
}
});
}
$("#menu").find('a').each(function () {
$(this).click(function () {
createElement();
});
});
createElement();
});
HTML
HTML
<html>
<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
</head>
<body>
<ul class="meny" id="menu">
<li><a href="#" id="l1">Utv?rdering/Feedback</a></li>
<li><a href="#" id="l2">Kontakt</a></li>
<li><a href="#" id="l3">?ppettider</a></li>
<li><a href="#" id="l4">Om Asper?d</a></li>
</ul>
<div id="contentl1">
</div>
<div id="contentl2">
</div>
<div id="contentl3">
</div>
<div id="contentl4">
</div>
</body>
</html>
回答by VisioN
Here is the best way to add new <p>element with text "Hej"to #contentl1using jQuery:
下面是添加新的最佳方式<p>与文本元素“HEJ”来#contentl1使用jQuery：
$("<p />", { text: "Hej" }).appendTo("#contentl1");
回答by Simon Edstr?m
function createElement() {
var a = $("#menu").find('a').each(function(){
if(a == "l1"){
var p = $("<p>");
p.text("Hej");
$("#contentl1").append(p);
}
});
}
回答by fmsf
I know it doesn't realate to answering your question but it is hard to leave this as a comment:
我知道回答您的问题并不重要，但很难将其作为评论：
var a = $("#menu").find('a').each(function(){ <-- this "a" will only be created after the each completes
if(a == "l1"){ <-- this "a" that you are verifying is a global variable
var text = $(document.createElement('p');
$('p').text("Hej");
$("#contentl1").append("text");
}
});
You can try this to solve your issue:
你可以试试这个来解决你的问题：
function createElement() {
if($(this).attr("id") == "l1"){
$("#contentl1").append('<p>hej</p>');
}
}
$("#menu a").each(function () {
$(this).click(function () {
createElement.apply(this);
});
});
回答by James Donnelly
For a start the click function can be done like this instead of having to use .find():
首先，点击功能可以像这样完成，而不必使用 .find()：
$('#menu a').click(function() { }
The .each() loop can be done like:
.each() 循环可以这样完成：
$('#menu a').each(function () {
var aId = $(this).attr('id');
var contentId = content + aId;
$(contentId).append('<p>Hej</p>');
})
回答by Simon
Something like this fiddle?
像这个小提琴一样的东西？
$('#menu').on('click', 'a', function(e) {
e.preventDefault();
$('<p>').text($(this).text()).appendTo('#content'+this.id);
});
回答by schnill
try this script, it'll do place the text in correct div.
试试这个脚本，它会把文本放在正确的div.
$(document).ready(function () {
$("#menu").find('a').each(function () {
$(this).on('click',function () {
$("#content"+$(this).attr("id")).append("<p>link "+$(this).attr("id")+" is clicked</p>");
});
});
});
