jquery随笔--控件追加值

最新推荐文章于 2021-06-02 18:19:45 发布

原创最新推荐文章于 2021-06-02 18:19:45 发布 · 821 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #控件追加值

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了JavaScript中元素插入方法的使用，包括append、prepend、after、before，并通过实例演示了每种方法的具体应用。通过对比不同方法的特性，帮助开发者更好地理解和选择合适的DOM操作方式。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

$(document).ready(function(){
//通过append()追加P标签的值
$("#but1").click(function(){
   $("#p1").append("<b style='color:green'>This is a paragraph(by append())</b>");
});
//通过prepend()追加P标签的值
$("#but2").click(function(){
   $("#p1").prepend("<b style='color:blue'>This is a paragraph(by prepend())</b>");
});
//通过after()追加P标签的值
$("#but3").click(function(){
   $("#p1").after("<b>This is a paragraph(by after())</b>");
});
   //通过before()追加P标签的值
$("#but4").click(function(){
      $("#but2").click(function(){
       $("#p1").before("<b style='color:purple'>This is a paragraph(by before())</b>");
      });
});
});
</script>
</head>
<body>

<p id="p1" style="color:red" >这是段落中的文本。</p>
<button id="but1">结尾插入内容append()</button>
<button id="but2">开头插入内容prepend()</button>
<button id="but3">之后插入内容after()</button>
<button id="but4">之前插入内容before()</button><br><br>

</body>
</html>