DOM节点的创建和DOM节点的内部插入

在进行web程序开发和网页开发的过程中，我们往往都需要通过动态添加一些内容，这些内容可以是元素，也可以是文本内容，也可以是设置属性，也可以是加入文档，这就涉及到了我学习到DOM的节点的插入和删除的这一部分的知识。
首先是如何创建节点，通过使用jQuery的函数 $()来进行处理，最常见到的就是创建插入一个HTML的元素节点：$ (“

”),还可以带着文本一起创建：

(“&lt;div&gt;输入文本&lt;/div&gt;”)，在创建元素的同时也可以给创建的元素设置属性，比如给

(“

”)设置一个类名和ID：

(“&lt;div class=’a’ id=’a’&gt; &lt;/div&gt;”),还可以把上面的全部方法结合起来创建一个跟我们编写的HTML结构一模一样的元素节点：

(“

输入文本

”)，接下来就是通过下面的代码生成创建添加到HTML代码里：
DOM节点的创建和DOM节点的内部插入

KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲div”).click()表示…body表示选择获取到body这个元素，

body.append(

(“

输入文本

”))表示在body的这个元素内部创建节点

创建DIV元素节点

，下面是效果

接下来就是插入节点的方法，插入节点有2种方法，第一种呢就是内部插入，第二种呢就是外部插入，我们这次了解内部插入，向DOM内部插入节点有4种方式，第一种就是append（），它是向每个匹配到的元素的内部的最后面追加内容，括号里的参数可以是上面创建的节点，可以是append（“

输入文本

“）,就是把你想要插入的内容写在括号里的位置，但是一定要记得加英文状态下的引号。第二种就是prepend()的方法,这个方法跟第一种差不多，只不过是它们插入的位置有点不一样，这个方法主要就是向匹配的元素的最前面追加内容（最前面，但是还是那个匹配元素的内部）,这两种方法其实用法都是一样的，不一样的就是语法，也就是内容和目标位置的不同。第三种方法是appendTo()的方法，这个方法是把所有匹配的元素追加到另一个元素的那个元素的集合里面。最后一种就是prependTo()的方法，这种方法和第三种差不多，跟第一种和第二种一样，都是插入的位置有点不一样，其他都一样。前面两种方法的使用是一模一样的，前面是要被插入的对象，后面则是要追加的内容，而后面两种方法的写法和前面两种刚刚好相反，前面则是要插入的内容，后面才是要被插入的对象。
下面演示它们的写法
通过JQuery的append（）给ID为a的元素添加div元素的写法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").append("<di…("#a").prepend (“

这是jQuery的prepend添加元素

”);
通过JQuery的appendTo()给ID为a的元素添加div元素的写法：

(&quot;&lt;div&gt;这是jQuery的appendTo添加元素&lt;/div&gt;&quot;).appendTo(

("#a"));
通过JQuery的prependTo()给ID为a的元素添加div元素的写法：$ (“

这是jQuery的prependTo添加元素

”). prependTo($("#a"));
下面是效果图和代码图
DOM节点的创建和DOM节点的内部插入