JavaScript创建元素的三种方法特点及对元素的操作

用js代码创建或添加html元素有三种方法

document.writer()

document.write("<p>我就是p1</p>");
复制代码

注意：当调用document.writer()这个方法，如果页面是在加载时，则是在页面中添加该元素。如果页面加载完毕后在调用document.writer()方法去创建元素，已加载的页面则会被清空

对象.innerHTML：在该对象创建其子元素

对象.innerHTML = "<p>我是p1</p>"
复制代码

注意：对象调用这个方法会清空该对象所有的子元素后再添加元素

首先文档创建元素document.createElement("元素")，然后在用对象追加这个元素

//点击按钮，在div中追加p元素
document.getElementById("btn").onclick = function(){var dv = document.getElementById("dv");var pObj =  document.createElement("p");pObj.innerText = "我是p";dv.appendChild(pObj);}
复制代码

对象对元素的操作：
对象.appendChild(元素对象)：在对象的最后一个子元素后面对象.insertBefore(新元素,指定子元素)：新元素添加在对象的指定子元素前，若找不到指定子元素则追加在后面对象.replaceChild(新元素，指定子元素)：新元素替换对象的指定子元素对象.removeChild(指定元素)：移除对象中的指定子元素

转载于:https://juejin.im/post/5bbc58d26fb9a05d011cfa89

JavaScript创建元素的三种方法特点及对元素的操作相关推荐

JAVA输出数组元素的三种方法（for/for each/toString）
2022_02_19学习输出数组元素的三种方法以及c语言和java中数组的不同点方法一:for循环输出数组元素方法二:for each循环语句方法三:Arrays类中的toString方法 c语 ...
Spark创建DataFrame的三种方法
跟关系数据库的表(Table)一样,DataFrame是Spark中对带模式(schema)行列数据的抽象.DateFrame广泛应用于使用SQL处理大数据的各种场景.创建DataFrame有很多种方 ...
Java创建线程的三种方法
这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...
Java 创建线程的三种方法比较
在学习编程的过程中,我觉得不止要获得课本的知识,更多的是通过学习技术知识提高解决问题的能力,这样我们才能走在最前方,本文主要讲述Java 创建线程的三种方法比较, 更多Java专业知识,广州疯狂jav ...
C语言中调用数组元素的三种方法：下标法、数组名法、指针法
/*调用数组元素的三种方法:下标法.数组名法.指针法*/ #include<stdio.h> int main() {int a[] = { 1,2,3,4,5 }, i, * p;pri ...
向列表增加元素的三种方法
向列表增加元素的三种方法 ,分别是:append().extend() 和 insert(). append() 方法是将参数作为一个元素增加到列表的末尾. extend() 方法是将参数作为一个列 ...
Python创建多线程的三种方法
Python创建多线程的三种方法 thread模块函数式创建线程继承threading类创建多线程 threading模块函数式创建线程使用总结 thread模块函数式创建线程调用thread模 ...
JavaScript刷新当前页面的三种方法，载入新文档替换当前页面
通过JavaScript刷新当前页面的三种方法代码就可以简单的实现,首先我们来看三种刷新当前页的方法: reload() 方法; replace() 方法; 页面自动刷新; 方法1:reload() ...
《 Python List列表全实例详解系列（四）》__列表删除元素（4种方法）删除重复元素（去重）(8种方法）
< Python List列表全实例详解系列(四)> __列表删除元素(4种方法)删除重复元素(去重)(8种方法) 我的技术成长&学习资料整理分享之路我遇到问题查找资料时,经常 ...

JavaScript创建元素的三种方法特点及对元素的操作

JavaScript创建元素的三种方法特点及对元素的操作相关推荐

最新文章

热门文章