jquary---创建节点和插入节点

最新推荐文章于 2019-10-02 10:37:00 发布

原创最新推荐文章于 2019-10-02 10:37:00 发布 · 851 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #function #xhtml #文档 #html #div

jquary 专栏收录该内容

38 篇文章

订阅专栏

本文通过一个具体的示例介绍了如何使用jQuery进行节点的创建与插入操作。包括如何利用jQuery选择器选取DOM元素，如何创建新的HTML元素，以及如何将这些新元素插入到现有的DOM树中。此外，还详细解释了append、appendTo、prepend和prependTo等方法的区别和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"></style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
   var $btn=$("button");//首先选出按钮
   $btn.click(function(){//给按钮加一个时间，并绑定一个函数
           //alert($("#box").html());
           //$("#box").html("<h2>这是一个box盒子</h2>");
           //alert($("#box").text());//使用text()方法读取或者设置元素的innerText：$("#btn1").text()
           //$("#box").text("<h2>这是一个box盒子</h2>");
           //alert($("img").attr("src"));//使用attr()方法读取或者设置元素的属性

           //插入节点
           //var $li_1=$("<li>节点</li>");
           //var $li_2=$("<li>节点</li>");
           //$("ul").append($li_1)
           //$("ul").append($li_2)


           //以下为练习题
           //var $tj=$("<li id='tj' name='tianjin'>天津</li>");
           //$("ul").append($tj);
           //$("p").appendTo("div");

           var $li_3=$("<li>222</li>");
           var $li_4=$("<li>333</li>");
           //$("ul").prepend($li_3);
           //$("ul").prepend($li_4);
           $($li_3).prependTo("ul");
           $($li_4).prependTo("ul");

/*           内部插入节点
           动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点
      *   append(content) :向每个匹配的元素的内部的结尾处追加内容
      *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
      *   prepend(content):向每个匹配的元素的内部的开始处插入内容
      *   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处*/

//$("ul").append("<li id='one' class='two'>柯达2</li>");//在内部标签的后面
  //$("p").appendTo("li");//在内部标签内容的后面
  //$("li").prepend("<b>Hello</b>");//在内部标签前面
  //$("p").prependTo("li");//在内部标签内容的前

})
       })

</script>
</head>

<body>
    <button>创建节点</button>
    
    <ul id="city">
       <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="cq" name="chongqing">上海</li>
    </ul>
   <p>p标签的内容</p>
    <div></div>
    <div></div>

    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
</body>
</html>