jQuery中的DOM操作

请先引入jquery.js

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

对下面这段简短的代码进行操作：

<p title="请选择你喜欢的水果">请选择你喜欢的水果</p>
<ul> 
<li title="苹果">苹果</li> 
<li title="橘子">橘子</li>
 <li title="香蕉">香蕉</li> 
</ul>

查找元素节点

var li_text= $("ul li:eq(1)").text(); 
alert(li_text)

查找属性节点

 var p_text=$("p").attr("title");
 alert(p_text)

创建元素节点——包含文本内容

var $li_2=$("<li>李子</li>");
 $("ul").append($li_2)

插入节点

• append()——向每个匹配的元素追加内容
• appendTo()——将所有匹配的元素追加到指定的元素
• prepend()——向每个匹配的元素内部前置内容
• prependTo()
• after()——在每个匹配的元素之后插入内容
• insertAfter()
• before()
• insertBefore()

//在P标签之后插入元素 
$("p").after("<h3>插入节点展示</h3>") 
//在P标签之前插入元素 
$("p").prepend("<h3>插入节点展示2</h3>")

删除节点（三种方法）

$("ul li:eq(0)").remove()
//detach()方法
$("ul li").click(function(){
    alert($(this).html())
})
var $li=$("ul li:eq(1)").detach();
//重新追加此元素，发现之前绑定的事件还在
$li.append("ul")

复制节点

$("ul li").click(function(){
        $(this).clone().appendTo("ul");
})

替换节点

$("p").replaceWith("你不喜欢的水果是？")
$("<h1>你不喜欢的水果2是？</h1>").replaceAll("p")

包裹节点——wrap(),wrapAll(),wrapInner()

 $("p").wrap("<h1></h1>")