zoukankan      html  css  js  c++  java

  • jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情，下面我来介绍在jquery中利用appendTo来动态创建元素，有需要的朋友可参考参考。

    当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

    //jQuery内部使用document.createElement创建元素:

    1. $("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
    复制代码

    否则使用innerHTML方法创建元素:

    //jQuery内部使用innerHTML创建元素:

     

    1. $("动态创建的div").appendTo(testDiv)
    复制代码

    看一个动态创建DOM、表单元素实例

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>createElement</title>
    6. <style type="text/css">
    7. .warpper{ border:1px solid red; padding:8px;}
    8. </style>
    9. <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
    10. <script type="text/javascript" language="javascript">
    11. <!--
    12. ///动态创建一个div
    13. $(function(){
    14. $('<div />',{
    15. id:'test',
    16. text:"this is a div",
    17. "class":"warpper",
    18. click:function(){
    19. var text=$(this).text();
    20. alert(text);
    21. }
    22. }).appendTo("body");
    23. });
    24. //创建input:text
    25. $(function(){
    26. $('<input />',{
    27. type:"text",
    28. val:"input text somethings...",
    29. name:"userName"
    30. }).appendTo("body");
    31. });
    32. //创建input select
    33. $(function(){
    34. var slt=$('<select />',{name:"country" });
    35. $('<option />',{
    36. val:"0",
    37. text:"请选择"
    38. }).appendTo(slt);
    39. $('<option>',{
    40. val:"CN",
    41. text:"China",
    42. selected:"selected"
    43. }).appendTo(slt);
    44. $("body").append(slt);
    45. });
    46. //创建radio
    47. $(function(){
    48. $('<input />',{
    49. type:"radio",
    50. name:"rdo",
    51. checked:"checked",
    52. val:"男"
    53. }).appendTo("body");
    54. $('<label>',{
    55. text:"男",
    56. }).appendTo("body");
    57. $('<input />',{
    58. type:"radio",
    59. name:"rdo",
    60. val:"女"
    61. }).appendTo("body");
    62. $('<label>',{
    63. text:"女"
    64. }).appendTo("body");
    65. });
    66. //creat checkbox
    67. $(function(){
    68. $('<input />',{
    69. type:"checkbox",
    70. name:"cbox",
    71. val:"1",
    72. checked:"checked"
    73. }).appendTo("body");
    74. });
    75. $(function(){
    76. $('<input />',{
    77. type:"file",
    78. name:"myfile"
    79. }).appendTo("body");
    80. });
    81. //-->
    82. </script>
    83. </head>
    84. </body>
    85. </html>
    复制代码

    如果是js的话我们可以如下 操作

    1. var select = document.createElement("select");
    2. select.options[0] = new Option("加载项1", "value1");
    3. select.options[1] = new Option("加载项2", "value2");
    4. select.size = "2";
    5. testDiv.appendChild(select);
    6. });
    复制代码
  • 相关阅读:
    15分钟学会使用Git和远程代码库
    关注的一些个人博客记录
    vue实现筛选功能，文字选中变色
    为博客添加二次元人物方法
    收藏几个用的到的网站
    《代码整洁之道》学习记录
    《架构整洁之道》学习记录
    《指尖上行--移动前端开发进阶之路》学习记录
    《JavaScript设计模式》学习记录
    《以匠心，致设计》学习记录
  • 原文地址：https://www.cnblogs.com/hannover/p/4181751.html
Copyright © 2011-2022 走看看