首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在普通的JavaScript中,如何在完全加载页面后选择使用innerHTML属性创建的元素?

在普通的JavaScript中,可以通过以下步骤在完全加载页面后选择使用innerHTML属性创建的元素:

  1. 确保页面完全加载完成,可以使用window.onload事件或者DOMContentLoaded事件来监听页面加载完成的事件。
  2. 在页面加载完成后,可以通过document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法获取到需要操作的父元素。
  3. 使用innerHTML属性创建新的元素,可以通过以下步骤:
    • 创建一个新的元素,例如使用document.createElement()方法创建一个div元素。
    • 设置新元素的属性,例如使用setAttribute()方法设置新元素的class、id等属性。
    • 设置新元素的内容,例如使用innerHTML属性设置新元素的HTML内容。
  • 将新创建的元素添加到父元素中,可以使用appendChild()方法将新元素添加到父元素的子节点列表中。

以下是一个示例代码:

代码语言:txt
复制
window.onload = function() {
  // 获取父元素
  var parentElement = document.getElementById("parent");

  // 创建新的元素
  var newElement = document.createElement("div");

  // 设置新元素的属性
  newElement.setAttribute("class", "new-element");
  newElement.setAttribute("id", "new-element");

  // 设置新元素的内容
  newElement.innerHTML = "This is a new element created using innerHTML.";

  // 将新元素添加到父元素中
  parentElement.appendChild(newElement);
};

在上述示例中,我们通过window.onload事件确保页面加载完成后执行代码。然后使用document.getElementById()方法获取到父元素,创建一个新的div元素,并设置其class和id属性。最后,使用innerHTML属性设置新元素的内容,并使用appendChild()方法将新元素添加到父元素中。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(TBC):https://cloud.tencent.com/product/tbc
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端学习笔记—JavaScript和jQuery

浏览器,DOMHTML分析器将一个页面转换成一个对象模型集合,通常称为DOM树。浏览器通过对这个DOM对象模型操作来线上HTML页面。...通过DOM对象接口,js可以在任何时候访问HTML文档任何数据,利用DOM接口可以无限制控制HTML页面,可以动态创建文档,遍历文档结构,对页面结构上元素进行增、删、改等操作,改变文档显示方式等...bootcdn远程cdn资源 1.使用jQuery核心函数:$/jQuery 2.使用jQuery核心对象:执行$()返回对象 DOM 对象加载完毕,马上执行函数。...// 文档加载完成执行函数内代码 //方式一,javaScript: onload = function () { //dom加载完成 }; // jQuery方式一: $(function() {...属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性元素。 ("[href]") 选取所有带有 href 属性元素。("[href!

9910

【前端面试题】03—200+道常见JavaScript基础面试题上(附答案)

innerHTML没有验证机会,因此更容易文档插入错误代码,使网页不稳定。 8、如何在不支持 JavaScript旧浏览器隐藏 JavaScript代码?...包括 defer和 async、动态创建DOM(创建 script,插入DOM加载完毕回调、按需异步载入 JavaScript。 14、call()和apply()区别和作用是什么?...attribute是DOM元素文档作为HTML标签拥有的属性;property就是DOM元素 JavaScript作为对象拥有的属性。...cookie是存储访问者计算机变量。每当一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。可以使用 JavaScript创建和获取 cookie值。...构造函数是一种特殊方法,主要用来创建对象时初始化对象,经常与new运算符一起使用创建对象语句中构造函数名称必须与类名完全相同。

4.3K10

JS魔法堂:LINK元素深入详解

渲染 五、属性rel介绍 六、动态创建LINK元素 七、与资源加载相关属性和事件 八、资源加载实验 1. IE下结论 2. Chrome下结论 3.... XHTML , 标签必须被正确地关闭。 三、普通属性介绍                             1.  ...CSS解析      首先需要理解是CSS解析到底是什么?    其实就是成功加载样式文件,将样式文件样式添加到样式表document.styleSheets。...渲染(页面元素与CSS属性结合呈现到页面上)      只要LINK元素点方式disabled为true,那么它所关联样式规则均不生效。...对于LINK元素IE9+和其他现代浏览器使用innerHTML+firstChild方式创建LINK元素,而在IE5~8则需要使用document.createElement方式创建

3.3K100

Js面试题__附答案

Void(0)用于调用另一种方法而不刷新页面。 23、如何强制页面加载JavaScript其他页面? 必须插入以下代码才能达到预期效果: ? 24、escape字符是用来做什么?...引用类型是更复杂类型,字符串和日期。 30、如何创建通用对象? 通用对象可以创建为: var I = new object(); 31、operator类型用来做什么?...载入页面的所有信息之前,不运行onload函数。这导致执行任何代码之前会出现延迟。 onDocumentReady加载DOM之后加载代码。这允许早期代码操纵。...可以JavaScript使用。 *运算符没有括号。 46、一个特定框架如何使用JavaScript超链接定位? 可以通过使用“target”属性超链接包含所需帧名称来实现。...innerHTML没有验证余地,因此,更容易文档插入错误代码,从而使网页不稳定。 57、如何在不支持JavaScript旧浏览器隐藏JavaScript代码?

8.8K30

AJAX 前端开发利器:实现网页动态更新核心技术

AJAX AJAX是开发者梦想,因为你可以: 不重新加载页面的情况下更新网页 页面加载请求来自服务器数据 页面加载后接收来自服务器数据 在后台向服务器发送数据 HTML页面 <!...AJAX工作原理 网页中发生事件(页面加载,按钮被点击) JavaScript创建XMLHttpRequest对象 XMLHttpRequest对象向Web服务器发送请求 服务器处理请求 服务器将响应发送回网页...以下示例演示了如何在用户输入字段输入字符时,网页可以与Web服务器通信: 示例说明 在上述示例,当用户输入字段中键入字符时,将执行名为 "showHint()" 函数。...> 在上述示例,当用户选择一个客户时,通过AJAX与服务器通信,并从数据库获取相应客户信息。客户信息将以HTML表格形式显示具有 "txtHint" ID 元素。...= table; } HTML div元素显示第一个CD 此示例使用一个函数来具有id="showCD"HTML元素显示第一个CD元素

8200

JavaScript学习笔记1

3.获取文档元素: 下面的方法是html dom方法 根据标记id属性值获取元素对象:document,getElementById(id属性对应值) 根据标记名称获取元素对象:document.getElementsByTagName...(标记名称); 根据标记name属性值获取元素对象:document.getElementsByName(name属性对应值); 1.2 JavaScript概述 什么是JavaScript...type=”text/javvascript” src=”js文件url”> 操作步骤:1.创建一个js文件2.script标记里面,使用src属性来引入外部js文件。...注意:页面加载事件是整个html网页加载完毕才会执行这个事件对应函数。...表单校验知识点总结:1.错误信息:一行显示,用他innerHTML属性回显错误信息。

1.7K40

求职 | 史上最全web前端面试题汇总及答案2

提供,只能用于加载CSS; ②页面加载时,link会同时被加载,而@import引用CSS会等到页面加载完再加载; ③import是CSS2.1 提出,只IE5以上才能被识别,而link是...JS如何操作Cookie? 简述cookie,JS如何操作cookie 15、谈谈javascript数组排序方法sort()使用,重点介绍sort()参数使用及其内部机制。...我们举例说明:比如一个黑客程序,他利用Iframe把真正银行登录页面嵌到他页面上,当你使用真实用户名,密码登录时,他页面就可以通过Javascript读取到你表单input内容,这样用户名...通过val()便可以获取input值 把节点元素名加上作为参数调用jQuery方法便可创建新节点,:jQuery(“”)。 5、如何向页面插入节点?...①addClass:为元素设置class属性,如果该元素已经存在class属性,则在其值添加空格及新class值。 ②css:操作元素style属性方法。 9、如何获取一个元素实际位置?

6K20

回到基础:理解 JavaScript DOM

Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格接口。本文中,我们将理解什么是 DOM 以及如何用 Javascript 去操作它。...它使 Javascript 能够访问和操作页面元素和样式。该模型构建在基于对象树结构,并定义: HTML 元素作为对象 HTML 元素属性和事件 访问HTML元素方法 ?...更改 HTML 元素 HTML DOM 允许我们通过更改其属性来对 HTML 元素内容和样式进行修改。 更改HTML innerHTML 属性可用于修改 HTML 元素内容。...下面列出了一些比较重要事件: 鼠标点击 页面加载 鼠标移动 输入字段更改 分配事件 可以用标记上属性直接在 HTML 代码定义事件。... 这里我们单击按钮时调用 changeText() 方法,并将该元素作为属性传递。 还可以用 Javascript 代码为多个元素分配相同事件。

2.5K30

Web-第三天 JavaScript学习【悟空教程】

BOM:浏览器对象 DOM:Document Object Model.操作文档元素和内容. 1.2.1.2 JavaScript作用 使用JavaScript添加页面动画效果,提供用户操作体验...不能使用JavaScript关键字作为变量名,:function JavaScript严格区分大小写。...页面加载成功触发onload()事件 2. 加载成功,触发延迟定时器,5秒,开始显示广告。 3....显示广告开始,5秒再次隐藏广告 3.4 案例实现 步骤1:页面,添加广告位div,并设置页面加载事件 <!...JS可以创建元素 使用JS可以对元素属性进行操作 使用JS可以对元素标签体进行操作 使用JS可以对指定元素样式进行操作(获得或修改) 第4章 案例:完善注册表单校验 4.1 案例介绍 昨天我们已经完成了表单数据校验

3.3K10

21道关于性能优化面试题(附答案)

HTML代码:避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率,尽量避免HTML标签写 Style属性 4、移动端性能如何优化? 优化方式如下。...(8)避免页面的主体布局中使用表,表要在其中内容完全下载之后才会显示出来,显示速度比DIV+CSS布局慢。 9、列举你知道Web性能优化方法。 具体优化方法如下。...脚本处理不当会阻塞页面加载、渲染,因此使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作。...不过需要注意是,更换版本之后,不要忘记测试代码,毕竟有时候不是完全向后兼容。 (2)使用合适选择器。...box- shadows和 gradients,它们往往严重影响页面的性能,尤其是一个元素同时都使用时。

1.7K20

js2

常用属性和方法: location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以 JavaScript...(标签)文本 属性节点(attribute对象):代表一个属性元素(标签)才有属性 注释是注释节点(comment对象) JavaScript 可以通过DOM创建动态 HTML: JavaScript...能够改变页面所有 HTML 元素 JavaScript 能够改变页面所有 HTML 属性 JavaScript 能够改变页面所有 CSS 样式 JavaScript 能够对页面所有事件做出反应...: 1.对于没有横线CSS属性一般直接使用style.属性名即可。...因为我们无法给一个不存在元素绑定事件。 window.onload事件文件加载过程结束时候触发。此时,文档所有对象都位于DOM,并且所有图像,脚本,链接和子框架都已完成加载

2.2K10

关于动态创建DOM元素问题

我们实际项目之中,相信有很多朋友直接使用了以下格式创建DOM元素 document.getElementById("...错误原因: (1) 页面加载时改变了页面的结构. IE6如果网络变慢或者页面内容太大就会出现"终止操作"错误....实际工作也碰到过使用这种方法修改内容, 某些浏览器并不能立刻显示添加元素, 因为不同浏览器显示引擎是不同....但是如果我们使用DomCreateElement创建对象, 在所有的浏览器几乎都可以. 但是jQuery如果传入而是一个完整HTML字符串, 内部也是使用innerHTML....所以也不是完全否定innerHTML函数使用. 所以从现在开始请摒弃这种旧知识, 使用下面介绍正确方法编程.

2.2K20

【面试】1093- 21 道关于性能优化面试题(附答案)

HTML代码:避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率,尽量避免HTML标签写 Style属性 4、移动端性能如何优化? 优化方式如下。...(8)避免页面的主体布局中使用表,表要在其中内容完全下载之后才会显示出来,显示速度比DIV+CSS布局慢。 9、列举你知道Web性能优化方法。 具体优化方法如下。...脚本处理不当会阻塞页面加载、渲染,因此使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作。...不过需要注意是,更换版本之后,不要忘记测试代码,毕竟有时候不是完全向后兼容。 (2)使用合适选择器。...box- shadows和 gradients,它们往往严重影响页面的性能,尤其是一个元素同时都使用时。

1.6K20

近一年web前端经典面试题整理

这种方式产生效果就像元素完全不存在;   Position:不会影响布局,能让元素保持可以操作;   Clip-path:clip-path 属性还没有 IE 或者 Edge 下被完全支持。...session与其父窗口session相同 九、Javascript定时器有哪些?...每次写完关闭之后重新调用该函数,会导致页面被重写。 innerHTML则是DOM页面元素一个属性,代表该元素html内容。你可以精确到某一个具体元素来进行更改。...2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility, 页面产生回流(当页面一部分元素需要改变规模尺寸、布局、显示隐藏等...(1)、window.onload方法是在网页中所有的元素(包括元素所有关联文件)完全加载到浏览器才执行

1.3K20

DOM扩展

“bj”元素 document.getElementsByClassName("bj bd"); // 取得类同时包含“bj”和“bd”元素 (2)classList属性 操作类名时,需要通过...,添加它 有了classList属性,除非需要删除全部所有类名,或者完全重写元素class属性,否则也就用不到className属性了。...(1)innerHTML属性 读模式:返回调用元素所有节点(包括元素、注释和文本节点)对应HTML标记; 写模式:根据指定创建DOM树,然后用这个DOM树完全替换调用元素原先所有子节点...删除带有事件处理程序或引用了其他JavaScript对象子树时,就会导致内存占用问题。...使用innerHTML、outerHTML等方法时,最好先删除要替换元素所有事件处理程序和JavaScript对象属性

1.5K31

JavaScript高级程序设计-性能整理(二)

比如,jQuery 就完全以 CSS 选择符查询 DOM 获取元素引用,而不是使用 getElementById()和 getElementsByTagName()。...使用这些属性当然有其方便之处,特别是 innerHTML。一般来讲,插入大量新 HTML 使用innerHTML使用多次 DOM 操作创建节点再插入来得更便捷。...创建 GUI 语言 C#,通常会给 GUI 上每个按钮设置一个 onclick 事件处理程序。这 样做不会有什么性能损耗。...把事件处理程序指定给元素浏览器代码和负责页面交互 JavaScript 代码之间就建立了联系。..."; }; 在这个重写例子,设置 元素 innerHTML 属性之前,按钮事件处理程序先被删除了。这样就可以确保内存被回收,按钮也可以安全地从 DOM 删掉。

78530

「Web编程API」- 04

三个事件执行顺序 keydown -- keypress -- keyup 1.1.2 键盘事件对象 使用keyCode属性判断用户按下哪个键 // 键盘事件对象keyCode...顶级对象window 1.2.4. window对象常见事件 页面(窗口)加载事件(2种) 第1种 window.onload 是窗口 (页面加载事件,当文档内容完全加载完成会触发该事件(包括图像...如果前一个任务耗时很长,一个任务就不得不一直等着。 这样所导致问题是: 如果 JS 执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞感觉。...为了解决这个问题,利用多核 CPU 计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。...同步任务指的是:主线程上排队执行任务,只有前一个任务执行完毕,才能执行一个任务; 异步任务指的是:不进入主线程、而进入”任务队列”任务,当主线程任务运行完了,才会从”任务队列”取出异步任务放入主线程执行

87120

纯原生组件化-模块化探索

不会有这么简单页面存在,就算简洁 Google 首页,也用到了400左右DOM元素。 很难保证其他资源文件CSS、JS会不会对上边DOM产生影响。...基本语法 shadow-DOM创建必须要使用JavaScript才能完成,我们需要在文档中有一个用于挂在shadow-DOM真实元素,也被称为host。...除此之外创建过程,就可以像普通DOM树那样增删改子元素了。...但是,这样文档是存在一个用来挂在shadow-DOM元素,这个根元素依然是一个普通HTML标签。...自定义标签注册名至少要包含一个- 结合场景来选择是否使用extends,个人不建议使用,因为看起来会舒服一些 普通标签方式 如果是针对普通一组标签进行封装,就是解决了一些相同功能组件需要在页面粘来粘去问题

80120

BOM和DOM

(比较重要)     通过使用 JavaScript,我们可以一定时间间隔之后来执行代码,而不是函数被调用后立即执行。...当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。   HTML DOM 模型被构造为对象树。...(text对象):代表元素(标签)文本 属性节点(attribute对象):代表一个属性元素(标签)才有属性 注释是注释节点(comment对象)    JavaScript 可以通过DOM创建动态...HTML: JavaScript 能够改变页面所有 HTML 元素 JavaScript 能够改变页面所有 HTML 属性 JavaScript 能够改变页面所有 CSS 样式 JavaScript...因为我们无法给一个不存在元素绑定事件。     window.onload事件文件加载过程结束时候触发。

52210

前端之BOM和DOM

常用属性和方法: location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以JavaScript...当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM模型被构造为对象树。 HTML DOM数 ?  ...标签)文本 属性节点(attribute 对象):代表一个属性元素(标签)才有属性 注释是注释节点(comment对象) JavaScript 可以通过DOM创建动态HTML: JavaScript...能够改变页面所有 HTML 元素 JavaScript 能够改变页面所有 HTML 属性 JavaScript 能够改变页面所有 CSS 样式 JavaScript 能够对页面所有事件作出反应...: 1.对于没有横线CSS属性一般直接使用style.属性名即可。

1.6K50
领券