js添加元素方法

js添加元素方法1.insertBefore添加元素到指定位置<ulid=”ul”><li>1</li><li>2</li><li>3</li></ul><ulid=”sel”></ul><script>varbtn=docume…

大家好,又见面了,我是你们的朋友全栈君。

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账号...

(0)


相关推荐

  • mac视频录制工具推荐[通俗易懂]

    mac视频录制工具推荐[通俗易懂]AVAideScreenRecorderforMac是一款mac视频录制工具,可帮助用户可以选择录制整个屏幕或自定义区域,支持声音的同步录制,以1080p等高清质量以高达60fps的速度录制屏幕活动、视频和游戏。它可以让您以无损质量处理所有屏幕录制任务,包括Zoom会议、视频通话、文件、在线课程等。除了屏幕捕获之外,我们的屏幕录像机还可以作为一个令人难以置信的音频和声音和录音机,将您的录音提升到一个新的水平。任何希望为音乐制作、音频笔记或其他任何东西创建专业品质音频的人都可

  • LSTM模型搭建_LSTM神经网络

    LSTM模型搭建_LSTM神经网络defLSTM_Classifier(self,train,trainLabel,test,testLabel,val_test,val_label,new_test=None):train,test=np.array(train),np.array(test)train,test=train.reshape(train.shape[0],1,train.shape[1]),test.reshape(test.shape[0],1,tes…

  • mybatis:Error parsing SQL Mapper Configuration. Cause: java.io.IOException: Could not find resource[通俗易懂]

    mybatis:Error parsing SQL Mapper Configuration. Cause: java.io.IOException: Could not find resource[通俗易懂]整天写业务逻辑代码,但偶尔整个配置搞死人(根基不牢),有些细节知识还是欠缺,遇到问题总是搞的很烦躁,通过这篇博文将自己遗忘的知识总结起来。_____________________________________________________________________________________________先贴错误:看起来很简单,按照错误排查一下,就ok,但硬生生搞了半天,还搞的烦躁,这么简单,咋找不到问题呢。分析:看错误可知,找不到mapper文件。查看myb.

  • VS PDB文件详解

    VS PDB文件详解转自https://blog.csdn.net/feihe0755/article/details/54233714PDB文件的介绍PDB(ProgramDataBase),意即程序的基本数据,是VS编译链接时生成的文件。PDB文件主要存储了VS调试程序时所需要的基本信息,主要包括源文件名、变量名、函数名、FPO(帧指针)、对应的行号等等。因为存储的是调试信息,所以一般情况下PDB…

  • Microsoft® Windows® 恶意软件删除工具

    Microsoft® Windows® 恶意软件删除工具 偶然间发现XP自带的恶意软件删除工具: MicrosoftWindowsMaliciousSoftwareRemovalTool 位置:C:/WINDOWS/system32/MRT.exe 或直接在“开始–运行”中输入mrt.exe运行。 可以到www.microsoft.com更新最新版本的程序。                       

  • python编程100例_python进阶路线

    python编程100例_python进阶路线异常模块下面介绍python常用的异常模块AttributeError异常AttributeError试图访问一个类中不存在的成员(包括:成员变量、属性和成员方法)而引发的异常Attribut

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号