金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 节点的插入之append

节点的插入之append

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-09-03 08:28

复制代码 代码如下:

实例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//append()的用法
//$("ul").append("<li title='abc'>hello</li>");
//$("ul").append("<li title='xyz'>world</li>");
//appendTo()的用法
$("<li title='xyz'>hello</li>").appendTo($("ul"));
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

 

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

在已有的节点上操作

<html xmlns=";

复制代码 代码如下:

<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery4</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var li1 = $("<li title='abc'>hello</li>");
var li2 = $("<li title='abc'>world</li>");
var li3 = $("<li title='abc'>hello world</li>");
$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>

<title>无标题文档</title>

代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" html head meta http-equiv="Content-Type" content="te...

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 $(function(){

  /*

  var p = $("p");

  var li = $("ul li:eq(1)");

 

  var title = p.attr("title");

  var title2 = li.attr("title");

  var text = li.text();

 

  alert(title);//hello world

  alert(title2);//1

  alert(text);//好

  */

  /*

  $("ul").append("<li title='abc'>hello</li>")

    .append("<li title='xyz'>world</li>");

  */

  $("<li title='abc'>hello</li>").appendTo("ul");

 });

</script>

</head>

 

<body>

<p title="hello world">你觉得学校怎么样?</p>

<ul>

 <li title="o">一般</li>

 <li title="1">好</li>

 <li title="2">很好</li>

 <li title="3">非常好</li>

 <li title="4">好得不得了</li>

 <li title="5">好的无法形容</li>

</ul>

</body>

</html>

 

 

 

 

 

实例二:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 /*

 var addItems = function()

 {

  

  document.getElementById("div1").innerHTML="";//避免重复点击

  var value = parseInt(document.getElementById("itemsNumber").value);

  //alert(value);

  for(var i = 0; i < value; i )

  {

   var input = document.createElement("input");

   input.setAttribute("type","text");

 

   var br = document.createElement("br");

   

   document.getElementById("div1").appendChild(input);

   document.getElementById("div1").appendChild(br);

  }

 }

 */

 $(function(){

  $("#btn").click(function(){

   document.getElementById("div1").innerHTML="";

   var value = parseInt($("#itemsNumber").val());

   

   for(var i = 0; i < value; i )

   {

    $("#div1").append("<input type='text'><br>");

   }

  });

 });

 

</script>

</head>

 

<body>

<input type="text" id="itemsNumber">

<input type="button" id="btn" value="click">

<div id="div1"></div>

</body>

</html>

 

 

 

实例三:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 $(function(){

  var li1 = "<li title='hello'>hello1</li>";

  var li2 = "<li title='hello'>hello2</li>";

  var li3 = "<li title='hello'>hello3</li>";

 

  $("ul").append(li1);

  $("ul").prepend(li2);

  $("ul li:eq(4)").after(li3);

 });

</script>

</head>

 

<body>

<p title="hello world">你觉得学校怎么样?</p>

<ul>

 <li title="o">一般</li>

 <li title="1">好</li>

 <li title="2">很好</li>

 <li title="3">非常好</li>

 <li title="4">好得不得了</li>

 <li title="5">好的无法形容</li>

</ul>

</body>

</html>

 

 

 

运行结果:

 

图片 1

 

 

 

实例四:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 $(function(){

  $("ul li:eq(2)").insertAfter("ul li:eq(4)");

 });

</script>

</head>

 

<body>

<p title="hello world">你觉得学校怎么样?</p>

<ul>

 <li title="o">一般</li>

 <li title="1">好</li>

 <li title="2">很好</li>

 <li title="3">非常好</li>

 <li title="4">好得不得了</li>

 <li title="5">好的无法形容</li>

</ul>

</body>

</html>

 

 

 

 

 

实例五:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 $(function(){

  //remove()方法返回被移除的节点的jQuery对象

  var removedLi = $("ul li:eq(3)").remove();

  removedLi.appendTo($("ul"));

 

  $("ul li").remove("li[title = 2]");

 

  $("ul li:eq(3)").empty();

 });

</script>

</head>

 

<body>

<p title="hello world">你觉得学校怎么样?</p>

<ul>

 <li title="o">一般</li>

 <li title="1">好</li>

 <li title="2">很好</li>

 <li title="3">非常好</li>

 <li title="4">好得不得了</li>

 <li title="5">好的无法形容</li>

</ul>

</body>

</html>

 

 

 

运行结果:

 

 

图片 2

 

 

 

 

实例六:动态文件添加和删除

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 /*

 function addFile()

 {

  var div = document.getElementById("file");

 

  var br = document.createElement("br");

  var input = document.createElement("input");

  var btn = document.createElement("input");

 

  input.setAttribute("type","file");

  btn.setAttribute("type","button");

  btn.setAttribute("value","删除");

 

  btn.onclick = function(){

   div.removeChild(br);

   div.removeChild(input);

   div.removeChild(btn);

  }

 

  div.appendChild(br);

  div.appendChild(input);

  div.appendChild(btn);

 }

 */

 $(function(){

  $("#addFile").click(function(){

   var br = $("<br/>");

   var input = $("<input type='file'>");

   var btn = $("<input type='button' value='删除'>");

   $("#file").append(br).append(input).append(btn);

   btn.click(function(){

    br.remove();

    input.remove();

    btn.remove();

   });

  });

 });

</script>

</head>

 

<body>

<input type="button" value="添加" id="addFile">

<div id="file"></div>

</body>

</html>

 

 

 

结果如下:

 

图片 3

 

 

 

实例七:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript"  src="jquery-1.8.1.js">

</script>

<script type="text/javascript">

 $(function(){

  $("#username").focus(function(){

   var value = $(this).val();

   if(value == this.defaultValue)

   {

    $(this).val("");

   }

  });

  $("#username").blur(function(){

   var value = $(this).val();

   if(value == "")

   {

    $(this).val(this.defaultValue);

   }

  });

 });

</script>

</head>

 

<body>

<input type="text" id="username" value="用户名"/><br>

<input type="password" id="password"/><br>

<input type="button" value="确定">

</body>

</html>

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html xmlns= head meta ht...

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:节点的插入之append

关键词: