jquery-append动态创建节点元素与内部插入节点

Javascript 1924 0 2012-08-26

jquery-append动态创建节点元素与内部插入节点
如果要在页面中增加某个元素,只需要找到元素的上级节点,通过函数$(html)完成元素的创建后,增加到该节点中
语法如下:
    $(html) 其中html表示用于动态创建DOM元素的HTML标记字符串
例如:
    var $div = $("<div title='jQuery理念'>Creat ChildNodes</div>");
    $("body").append($div);
    意思是创建一个节点字符串"<div title='jQuery理念'>Creat ChildNodes</div>",然后插入到匹配元素<body>即页面中
    ①append(content)向每个匹配的元素内部追加内容。这个操作与对指定的元素执行a方法,将它们添加到文档中的情况类似。content要追加到目标中的内容
    向所有段落中追加一些HTML标记。
    HTML 代码:<p>I would like to say: </p>
    jQuery 代码:$("p").append("<b>Hello</b>");
    结果:[ <p>I would like to say: <b>Hello</b></p> ]表示在<元素中插入一个<b>元素并最佳到<p>元素中内容的末尾
    ②append(function(index, html))向每个匹配的元素内部追加内容。返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
<!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>
    <title>动态插入节点方法</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("div").append(retHtml); //插入内容
            function retHtml() {
                var str = " <b>Write Less Do More</b> ";
                return str;
            }
        })
    </script>
</head>
<body>
     <div>jQuery</div>
</body>
</html>
效果图:


    ③appendTo(content)把所匹配的元素追加到另一个指定的元素集合中,content表示要追加到的目标元素
   把所有段落追加到ID值为foo的元素中
   HTML 代码:<p>I would like to say: </p> <div></div><div></div>
   jQuery 代码:$("p").appendTo("div");
   结果:<div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div>
   把<p>元素插入到所有的<div>元素中 
此外以上的都是追加插入到匹配元素的最后面,而如果先插入到匹配元素的内部的里面是:
   ④prepend(content)向每个所选择的元素内部前置内容,与append意义相同,只不过是插入的位置不同,以前一后。
   ⑤prepend(function(index,html))向所匹配的元素内部前置function函数所返回的内容
   ⑥prependTo(content)把所匹配的元素前置到另一个指定的元素集合中,content表示要前置到的目标元素

上一篇:jquery实现上传图片预览,可兼容大部分浏览器

下一篇:jquery控件frameset框架的属性即隐藏左侧frame

讨论数量:0

请先登录再发表讨论。 2024-05-02

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链