原生js中创建节点方法：
document.write("<div></div>");可以打开标准流，添加元素，再关闭标准流。该方法慎用，可能会覆盖掉页面。
innerHTML("<div></div>");设置内容。如果内容包含标签，也会被解析出来。
document。createElement("div");该方法创建的标签只存在于内存中，如果想在页面上显示，需要使用appendChild();方法进行追加。
jQuery中如何创建节点呢?
方式一：html();
设置或获取内容
获取内容：html();不给参数
可以获取到元素的所有内容
设置内容：html();给参数
会把原来内容覆盖
如果内容中含标签，会解析出来
该方法和innerHTML("<div></div>");类似
方式一：$();
能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要使用append();方法进行追加。
该方法和document。createElement("div");类似
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="html()" id="btnHtml" />
<input type="button" value="$()" id="btn1" />
<div id="div1">
<p>
p1
<span>span1</span>
</p>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#btnHtml").click(function(){
//console.log($("#div1").html());
//$("#div1").html("设置内容");
$("#div1").html('设置内容1<a href="https://www.baidu.com">百度一下</a>');
});
$("#btn1").click(function(){
var $link=$('<a href="https://www.baidu.com">百度一下</a>');
//追加节点
$("#div1").append($link);
});
});
</script>
添加节点
append();
父元素.append(子元素);子元素作为最后一个子元素添加到父元素
- ①对于新建的元素，添加到父元素中，则直接添加到父元素的最后
- ②对于页面中已经存在的元素，该方法会将子元素剪切，然后粘贴在父元素的最后。（不管该子元素是否属于该父元素）
prepend();
使用方法同上。只是该方法的作用是将子元素作为第一个子元素添加到父元素
before();
元素A.before(元素B);把元素B作为兄弟元素插入到元素A的前面
after();
使用方法同上。只是该方法的作用是把元素B作为兄弟元素插入到元素A的后面
appendTo();
子元素.appendTo(父元素);把子元素作为父元素的最后一个子元素添加.
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="append" id="btnAppend" />
<input type="button" value="prepend" id="btnPrepend" />
<input type="button" value="before" id="btnBefore" />
<input type="button" value="after" id="btnAfter" />
<input type="button" value="appendTo" id="btnAppendTo" />
<ul id="ul1">
<li>我是第一个li标签</li>
<li id="li12">我是第二个li标签</li>
<li>我是第三个li标签</li>
</ul>
<ul id="ul2">
<li>我是第一个li标签2</li>
<li id="li22">我是第二个li标签2</li>
<li>我是第三个li标签2</li>
</ul>
</body>
</html>
<script src="js/jquery.js" ></script>
<script>
$(function(){
$("#btnAppend").click(function(){
//新建一个li标签，添加到ul1中
//var $liNew=$("<li>我是新创建的li标签</li>");
//$("#ul1").append($liNew);
//将ul1中存在的标签添加到ul1中
var $li12=$("#li12");
//$("#ul1").append($li12);
//将ul2中存在的标签添加到ul1中
var $li22=$("#li22");
$("#ul1").append($li22);
});
$("#btnPrepend").click(function(){
//新建一个li标签，添加到ul1中
//var $liNew=$("<li>我是新创建的li标签</li>");
//$("#ul1").prepend($liNew);
//将ul1中存在的标签添加到ul1中
var $li12=$("#li12");
//$("#ul1").prepend($li12);
//将ul2中存在的标签添加到ul1中
var $li22=$("#li22");
$("#ul1").prepend($li22);
});
$("#btnBefore").click(function(){
var $divNew=$("<div>我是新创建的div</div>");
$("#ul1").before($divNew);
});
$("#btnAfter").click(function(){
var $divNew=$("<div>我是新创建的div</div>");
$("#ul1").after($divNew);
});
$("#btnAppendTo").click(function(){
//新建一个li标签，添加到ul1中
var $liNew=$("<li>我是新创建的li标签</li>");
$liNew.appendTo($("#ul1"));
});
});
</script>
网友评论