大家好,又见面了,我是你们的朋友全栈君。
1.insertBefore添加元素到指定位置
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul id="sel">
</ul>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
var li = document.createElement('li');
li.innerText = 'abcd';
//把li插入到ul的第一个位置
var ul = document.getElementById('ul');
//insertBefore
//ul.insertBefore(li, ul.children[0]); //insertBefore(要添加的元素,已添加的元素)
ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面
</script>
2.appendChild 添加子节点到父节点的末尾
var btn = document.getElementById('btn');
btn.onclick = function () {
var li = document.createElement('li');
li.innerText = 'abcd';
//把li插入到ul的第一个位置
var ul = document.getElementById('ul');
var div = document.createElement('div');
div.innerText = 'div';
ul.append(div);
//appendChild
var sel = document.getElementById('sel');
//如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
//本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点
sel.appendChild(div); //将原来div的位置 添加到 #sel中,原先的会消失
//var cloneNode = div.cloneNode(true); //cloneNode 生成的克隆节点, div被克隆的节点,
//cloneNode.innerText = 'test';
//sel.appendChild(cloneNode); //克隆解决原节点转移位置
3.replaceChild 替换子节点
var div = document.createElement('div');
div.innerText = 'div';
ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152064.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...