爱站程序员基地动态创建元素
方式一
<div id=\"box\"></div>var spanNode1=$(\"<span>创建元素</span>\")$(\"#box\").append(spanNode1)//也可以 spanNode1.appendTo(\'#box\')
方式二
<div id=\"box\"></div>var node=$(\"#box\").html(\"<li>内容</li>\")
加入元素
<div id=\"box\"></div>append------>$(\"#box\").append(spanNode1)appendTo---------> spanNode1.appendTo(\'#box\')$(\"#box\").html(\"<li>内容</li>\")prepend------->$(\"#box\").prepend(\'<span>添加在前面的元素</span>\')//在元素的第一个子元素前面追加内容或节点after--------->$(\"#box\").after(\'<span>作为兄弟元素</span>\')//在元素的后面作为兄弟元素加入before--------->$(\"#box\").before(\'<span>作为兄弟元素</span>\')//在元素的前面作为兄弟元素加入
清空元素
方式一：清空所有子元素
$(\"#box\").empty();$(\"#box\").html(\"\");
方式二：把自己以及内部元素删除
$(\"#box\").remove();
复制元素
var d1=$(\"#box\").clone();
案例：
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title><style type=\"text/css\">.main{width: 900px;height: 900px;margin: 0 auto;display: flex;}.left,.right,.center{width: 300px;height: 900px;box-sizing: border-box;border: 1px solid #ccc;}.center{display: flex;flex-direction: column;justify-content: center;align-items:center;}.center button{margin: 30px;}select{width: 200px;height: 600px;}</style><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script></head><body><div class=\"main\"><div class=\"left\"><h3>请选择你的爱好</h3><select name=\"hobby\" multiple=\"multiple\"><option value=\"\">弹琴</option><option value=\"\">打鼓</option><option value=\"\">唱歌</option><option value=\"\">吉他</option><option value=\"\">打游戏</option></select></div><div class=\"center\"><button type=\"button\" class=\"addAll\">>></button><button type=\"button\" class=\"removeAll\"><<</button><button type=\"button\" class=\"add\">></button><button type=\"button\" class=\"remove\"><</button></div><div class=\"right\"><h3>已选择</h3><select name=\"hobby\" multiple=\"multiple\"></select></div></div><script type=\"text/javascript\">$(\".addAll\").click(function(){$(\".left select option\").appendTo(\'.right select\')})$(\".removeAll\").click(function(){$(\".right select option\").appendTo(\'.left select\')})$(\".add\").click(function(){$(\".left select option:checked\").appendTo(\'.right select\')})$(\".remove\").click(function(){$(\".right select option:checked\").appendTo(\'.left select\')})</script></body></html>
结果：
