jQuery 当在文本框中输入一个内容后,再点击增加,这时就可以把输入的内容增加到下面元素波萝的后面

如下图:当在文本框中输入一个内容后,再点击增加,这时就可以把输入的内容增加到下面元素波萝的后面,依次类推。我只有4个悬赏值,大神我会给你追加的,现在设置不了4个。请采用j... 如下图:当在文本框中输入一个内容后,再点击增加,这时就可以把输入的内容增加到下面元素波萝的后面,依次类推。 我只有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>
展开
 我来答
learneroner
高粉答主

推荐于2016-06-11 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6570万
展开全部
<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>
追问
大神,你qq多少?我添加的时候所有文字都显示define
追答

你的代码怎样的?我试了没问题啊

厅子山
2014-12-18 · TA获得超过177个赞
知道小有建树答主
回答量:132
采纳率:100%
帮助的人:42万
展开全部
这段代码放到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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式