jQuery 当在文本框中输入一个内容后，再点击增加，这时就可以把输入的内容增加到下面元素波萝的后面
如下图：当在文本框中输入一个内容后，再点击增加，这时就可以把输入的内容增加到下面元素波萝的后面，依次类推。 我只有4个悬赏值，大神我会给你追加的，现在设置不了4个。
请采用jQuery实现下面的功能
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-3-1</title>
<!-- 引入jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script src="06.js" type="text/javascript"></script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?<input type="text" name="content" ,id ="content"> <input type="button" value="增加"></p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(e){
$(":button").click(function(event) {
val = $("#content").val();
$(".fruit").append("<li title='"+val+"'>"+val+"</li>");
});
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?
<input type="text" name="content" id ="content">
<input type="button" value="增加">
</p>
<ul class="fruit">
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>追问
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(e){
$(":button").click(function(event) {
val = $("#content").val();
$(".fruit").append("<li title='"+val+"'>"+val+"</li>");
});
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?
<input type="text" name="content" id ="content">
<input type="button" value="增加">
</p>
<ul class="fruit">
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>追问
大神，你qq多少？我添加的时候所有文字都显示define
追答你的代码怎样的？我试了没问题啊
温馨提示：答案为网友推荐，仅供参考
第1个回答 2014-12-18
这段代码放到head中
=============================
<script>
$(function(){
var $btn= $("[type='button']");
$btn.click(function(){
//得到文本框对象
var $content=$("#content");
//得到文本框的值
var content=$content.val();
//如果文本框的值为空就不进行插入操作,直接结束程序
if(content===null||$.trim(content).length===0){
return;
}
//组合一段HTML 代码
var html='<li title='+content+'>'+content+'</li>';
$("ul").append(html);
});
});
</script>
=============================
<script>
$(function(){
var $btn= $("[type='button']");
$btn.click(function(){
//得到文本框对象
var $content=$("#content");
//得到文本框的值
var content=$content.val();
//如果文本框的值为空就不进行插入操作,直接结束程序
if(content===null||$.trim(content).length===0){
return;
}
//组合一段HTML 代码
var html='<li title='+content+'>'+content+'</li>';
$("ul").append(html);
});
});
</script>
相似回答