jQueryDom操作之创建节点

来源：互联网发布：卸载linux eclipse 编辑：程序博客网时间：2024/04/29 10:04

创建节点:

使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。

注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个元素, 可以使用 $(“”) 或 $(“”), 但不能使用

$(“”) 或 $(“”)

创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.10.2.js"></script><style type="text/css"> div,span{    width: 140px;    height: 140px;    margin: 20px;    background: #9999CC;    border: #000 1px solid;float:left;    font-size: 17px;    font-family:Roman;}div.mini{    width: 30px;    height: 30px;    background: #CC66FF;    border: #000 1px solid;    font-size: 12px;    font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库-->    </head> <body> <input type="button" value="保存"  class="mini" name="ok"  class="mini" /> <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/> <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/> <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/> <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>  <!--文本隐藏域-->         <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4">  <h1>天气冷了</h1> <h2>天气又冷了</h2>      <div id="one">     id为one   div      </div> <ul id="city">  <li id="bj" name="beijing">北京</li>  </ul></body><script language="JavaScript">//在city下增加<li id="tj" name="tianjin">天津</li>节点  //创建<li></li>//设置属性<li id="tj" name="tianjin"></li>    //设置文本节点<li id="tj" name="tianjin">天津</li>//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下</script></html>

答案：

<script language="JavaScript">//在city下增加<li id="tj" name="tianjin">天津</li>节点  //创建<li></li>$li = $("<li/>");//设置属性<li id="tj" name="tianjin"></li>$li.attr("id","tj");$li.attr("name","tianjin");    //设置文本节点<li id="tj" name="tianjin">天津</li>$li.text("天津1");//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下$("#city").append($li);</script>