使用jquery动态创建元素答案

【问题标题】：dynamically create element using jquery使用jquery动态创建元素
【发布时间】：2013-01-21 10:12:53
【问题描述】：

我正在尝试使用 jquery 创建元素。当我点击一个链接时，我想创建一个元素“p”，给它一些文本，然后把它放在我的一个 div 中。另外，我想检查点击了哪个链接，所以我可以将创建的“p”放在正确的 div 中。关于我哪里做错的任何解决方案？

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>

<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>

【问题讨论】：

首先.. 你的var text = $(document.createElement('p'); 缺少一个右括号
您是否在函数内部的条件中使用变量，其返回值应该是变量？ var a = $("#menu").find('a').each(function(){ if(a == "l1"){

标签： javascript jquery html createelement

【解决方案1】：

这是使用 jQuery 将带有文本 "Hej" 的新 <p> 元素添加到 #contentl1 的最佳方法：

$("<p />", { text: "Hej" }).appendTo("#contentl1");

【讨论】：

【解决方案2】：

function createElement() {
  var a = $("#menu").find('a').each(function(){
    if(a == "l1"){
    var p = $("<p>");
    p.text("Hej");
    $("#contentl1").append(p);
    }
  });
}

【讨论】：

【解决方案3】：

首先，点击功能可以这样完成，而不必使用 .find()：

$('#menu a').click(function() { }

.each() 循环可以这样完成：

$('#menu a').each(function () {
    var aId = $(this).attr('id');
    var contentId = content + aId;
    $(contentId).append('<p>Hej</p>');
})

【讨论】：

【解决方案4】：

我知道回答您的问题并不重要，但很难将其作为评论：

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");
    }
  });

你可以试试这个来解决你的问题：

function createElement() {
  if($(this).attr("id") == "l1"){
   $("#contentl1").append('<p>hej</p>');
  }
}

$("#menu a").each(function () {
    $(this).click(function () {
        createElement.apply(this);
    });
});

【讨论】：

【解决方案5】：

类似this fiddle?

$('#menu').on('click', 'a', function(e) {
    e.preventDefault();
    $('<p>').text($(this).text()).appendTo('#content'+this.id);
});

【讨论】：

【解决方案6】：

试试这个脚本，它会在正确的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>");
    });
});


});

【讨论】：

【解决方案7】：

我个人喜欢将经典的 JS DOM 用于任务，因此这是您首先使用 JQuery 创建 DOM 对象的方法。返回的 DOM 对象是 HTML 的外部元素（p 标签），但内部 HTML 可以任意复杂。

var elP = $("<p>Hej</p>")[0]
// Do some other DOM manipulations of p
// eg: elP.someCustomTag='foobar'

$("#content1").append(elP)

【讨论】：