HTML中的append()方法用于向指定的元素追加内容,这个方法可以接收一个或多个参数,参数可以是任何有效的HTML字符串、DOM节点或者jQuery对象,当调用append()方法时,它会将这些参数添加到指定元素的内部末尾。
以下是关于HTML中append()方法的详细介绍:
1、基本用法
append()方法的基本用法非常简单,只需要将要追加的内容作为参数传递给该方法即可,如果要向一个div元素追加一段文本,可以使用以下代码:
<!DOCTYPE html> <html> <head> <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").append("这是追加的文本"); }); }); </script> </head> <body> <div></div> <button>点击追加文本</button> </body> </html>
2、追加多个元素
append()方法还可以同时追加多个元素,只需将要追加的元素作为参数传递给该方法即可,如果要向一个div元素追加两个段落,可以使用以下代码:
<!DOCTYPE html> <html> <head> <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").append("<p>这是第一个段落。</p><p>这是第二个段落。</p>"); }); }); </script> </head> <body> <div></div> <button>点击追加文本</button> </body> </html>
3、追加DOM节点和jQuery对象
append()方法还可以接收DOM节点和jQuery对象作为参数,如果要向一个div元素追加一个表格,可以使用以下代码:
<!DOCTYPE html> <html> <head> <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var table = "<table><tr><td>单元格1</td><td>单元格2</td></tr></table>"; $("div").append(table); }); }); </script> </head> <body> <div></div> <button>点击追加表格</button> </body> </html>
4、使用可选的回调函数参数
append()方法还支持可选的回调函数参数,这个回调函数会在追加操作完成后执行,可以在追加文本后将焦点设置到新添加的文本上:
<!DOCTYPE html> <html> <head> <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").append("这是追加的文本"); $("div").children().last().focus(); // 将焦点设置到新添加的文本上 }); }); </script> </head> <body> <div></div> <button>点击追加文本</button> <!-这里可以添加一些输入框或其他可聚焦的元素 --> <!-<input type="text" /> --> <!-<textarea></textarea> --> <!-<select></select> --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... --> <!-... -->
原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/366302.html