JS动态创建元素:
一、document.createElement
说明：在选定元素(父元素)内部的最后末尾追加创建新元素,DOM结构存在新元素节点，可正常渲染显示，但网页源码中无新元素代码；删除时，先获取父元素，使用父元素的remove方法；元素从DOM中删除，删除后，无法再获取。
//父元素var jsDiv = document.getElementById("jsc");var p = document.createElement("p");p.id = "newp1";p.style.color = "red";p.innerText = "html字符串直接生成";jsDiv.appendChild(p);
二、document.write
说明：会覆盖整个页面上的内容,DOM结构存在新元素节点，可正常渲染显示，网页源码中无新内容的代码;
删除时，使用document.body.remove方法；元素从DOM中删除，删除后，无法再获取。
document.write("<h1 id='newp1'>document.write创建的元素</h1><button onclick='jsDel()'>js删除</button>");
三、标签元素.innerHTML
说明：会覆盖选定元素内部的所有内容,DOM结构存在新元素节点，可正常渲染显示，但网页源码中无新元素代码;
删除时，先获取父元素，使用父元素的remove方法；元素从DOM中删除，删除后，无法再获取。
//父元素var jsDiv = document.getElementById("jsc");jsDiv.innerHTML = "<h2 id='newp1'>innerHTML方式</h2>";
四、删除元素方法示例
function jsDel() {var p = document.getElementById("newp1");console.log(p);jsDiv.removeChild(p);var p1 = document.getElementById("newp1");console.log(p1);}
JQuery动态创建元素
一、jquery对象
说明：在选定元素内部的最后末尾追加创建新元素,DOM结构存在新元素节点，可正常渲染显示，但网页源码中无新元素代码;
删除时，先获取父元素，使用父元素的remove或empty方法；元素从DOM中删除，删除后，无法再获取；
//父元素var jqDiv = $("#jqc");//var p = $("<p id='newp2'>jquery html字符串直接生成</p>");//p.appendTo($("#jqc"));//p.appendTo(jqDiv); //子元素插入到父元素中jqDiv.append(p); //向父元素中插入子元素// jqDiv.append("<p id='newp2'>jquery html字符串直接生成</p>");//$("<p id='newp2'>jquery html字符串直接生成</p>").appendTo(jqDiv);
二、jquery.html方法
说明：会覆盖选定元素内部的所有内容,DOM结构存在新元素节点，可正常渲染显示，但网页源码中无新元素代码
删除时，先获取父元素，使用父元素的remove或empty方法；元素从DOM中删除，删除后，无法再获取；
var p = "<p id='newp2'>jquery html字符串直接生成</p>";jqDiv.html(p);
三、jquery删除元素方法
remove:$(目标).remove();//删除目标元素及内部的所有元素empty:$(目标).empty();//删除目标元素内部的所有元素
四、jquery创建元素的其它方式
参考:/qq_27626333/article/details/51927022
1) prepend() 方法在被选元素的开头（仍位于内部）插入指定内容
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。
语法：$(selector).prepend(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").prepend("<b>Hello world!</b> ");});});</script></head><body><p>This is a paragraph.</p><p>This is another paragraph.</p><button>在每个 p 元素的开头插入内容</button></body></html>
2) prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。
语法：$(content).prependTo(selector)
content 必需。规定要插入的内容（可包含 HTML 标签）。
selector 必需。规定在何处插入内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("<b>Hello World!</b>").prependTo("p");});});</script></head><body><p>This is a paragraph.</p><p>This is another paragraph.</p><button class="btn1">在每个 p 元素的开头插入文本</button></body></html>
3)after() 方法在被选元素后插入指定的内容
语法：$(selector).after(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").after("<p>Hello world!</p>");});});</script></head><body><p>This is a paragraph.</p><button>在每个 p 元素后插入内容</button></body></html>
4) before() 方法在被选元素前插入指定的内容
语法：$(selector).before(content)
content 必需。规定要插入的内容（可包含 HTML 标签）。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("p").before("<p>Hello world!</p>");});});</script></head><body><p>This is a paragraph.</p><button class="btn1">在每个段落前面插入新的段落</button></body></html>
5)insertAfter()把匹配的元素插入到另一个指定的元素集合的后面
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
语法：$(content).insertAfter(selector)
content必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
selector必需。规定在何处插入被选元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("<span>你好！</span>").insertAfter("p");});});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button>在每个 p 元素之后插入 span 元素</button></body></html>
6) insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
语法：$(content).insertBefore(selector)
content 必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
selector 必需。规定在何处插入被选元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("<span>你好！</span>").insertBefore("p");});});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button>在每个 p 元素之前插入 span 元素</button></body></html>
