jQuery 添加元素LOGIN

jQuery 添加元素

通过 jQuery,可以很容易地添加新元素/内容。


添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容


jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>追加文本</b>。");
            });
            $("#btn2").click(function(){
                $("ol").append("<li>追加列表项</li>");
            });
        });
    </script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
    <li>列表项  1</li>
    <li>列表项  2</li>
    <li>列表项  3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

运行程序尝试一下


jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

运行程序尝试一下


通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。

不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>

运行程序尝试一下


jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("img").before("<b>之前</b>");
            });
            $("#btn2").click(function(){
                $("img").after("<i>之后</i>");
            });
        });
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

运行程序尝试一下


通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function afterText(){
            var txt1="<b>I </b>";                    // 使用 HTML 创建元素
            var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
            var txt3=document.createElement("big");  // 使用 DOM 创建元素
            txt3.innerHTML="jQuery!";
            $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
        }
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>

运行程序尝试一下



下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); }); }); </script> </head> <body> <img src="https://img.php.cn/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150"> <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button> </body> </html>
提交重置代码
章节课件