开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法使用.innerHTML正确交换div元素

是因为.innerHTML属性只能用于替换或插入HTML内容，而不能用于交换元素。要正确交换div元素，可以使用以下方法：

使用父元素的insertBefore方法：可以通过获取父元素，然后使用insertBefore方法将一个元素插入到另一个元素之前，从而实现元素的交换。示例代码如下：

var parent = document.getElementById("parent");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

parent.insertBefore(div2, div1);

使用父元素的replaceChild方法：可以通过获取父元素，然后使用replaceChild方法将一个元素替换为另一个元素，从而实现元素的交换。示例代码如下：

var parent = document.getElementById("parent");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

parent.replaceChild(div2, div1);

这些方法可以在前端开发中实现元素的交换，适用于各种场景，例如在拖拽排序、动态布局等情况下。对于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或咨询腾讯云客服获取更详细的信息。

相关搜索:无法用innerHTML替换div文本如何使用javascript交换html div元素的位置无法使用nextUntil()正确包装div 使用Puppeteer获取元素innerHTML .replace()函数无法正确交换字符使用CSS交换div项使用Jquery交换div ID 通过.innerHTML添加元素时，无法使用position:sticky；如何正确对齐div元素？使用复选框交换div元素中内容的位置无法使用底零放置div元素使用jQuery交换列表元素无法使用jquery插件获取正确的div Div元素不能正确显示使用innerHTML/insertAdjacentHTML和JS替换Div内容？无法使用javascript将元素innerHTML复制到剪贴板无法使用javascript对div元素进行排序使用单选按钮时无法更改innerHTML BeautifulSoup无法正确查找元素如何使用React更改元素的innerHTML？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS操作XML中DTD介绍及使用方法分析

本文实例讲述了JS操作XML中DTD介绍及使用方法。分享给大家供大家参考，具体如下：

02

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

Demo实现了对任意方格进行拖拽，可以交换位置，其中Demo-1利用了勾股定理判断距离！

01

鲜为人知的前端知识

需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码

03

关于动态创建DOM元素的问题

在我们实际的项目之中，相信有很多的朋友直接使用了以下的格式创建DOM元素

02

告别 XSS！新的 W3C 提案助你安全操作 DOM

Sanitizer API 是一个新的提案，目标是构建一个强大的处理器，以便将任意字符串更安全地插入到 HTML 页面。

02

事件基础及操作元素

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

02

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

Sortable —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS库，例如Bootstrap

01

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

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下：

00

dojo/dom-construct.toDom方法学习笔记

toDom方法用来将html标签字符串转化成DOM节点。1.7之后toDom方法被分配到了dom-construct模块。

01

浅析JavaScript的用户登录表单——焦点事件

大家好，我是前端进阶者。在Web项目开发中，经常会在表单验证功能看到焦点事件。例如，文本框获取焦点改变文本框的颜色，文本框失去焦点检验输入的文本框的内容是否正确等。接下来，小编带大家一起来实现一个用户登录的表单！

01

大一下学期JavaScript(JS)课后作业整理

这学期学的JavaScript, 把老师留过的课后作业都整理一下发上来, 初学者可以根据案例要求自己制作. 不敢保证我这里发布的代码就是最优解, 不足的地方, 可以指出. (没有排过顺序, 难度等级低)

03

WebComponent魔法堂:深究Custom Element 之面向痛点编程

前言最近加入到新项目组负责前端技术预研和选型，一直偏向于以Polymer为代表的WebComponent技术线，于是查阅各类资料想说服老大向这方面靠，最后得到的结果是:"资料99%是英语无所谓，最重要是UI/UX上符合要求，技术的事你说了算。"，于是我只好乖乖地去学UI/UX设计的事，木有设计师撑腰的前端是苦逼的:(嘈吐一地后，还是挤点时间总结一下WebComponent的内容吧，为以后作培训材料作点准备。浮在水面上的痛组件噪音太多了！在使用Bootstrap的Modal组件时，我们不免要Ctr

05

【JavaEE初阶】JavaScript(WebAPI)

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM 所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发. 具体可查看: API参考文档

02

小霸王打字机

依稀记得童年时期，站在电视机傍边，和自己的小伙伴玩小霸王学习机的情景。时间如白驹过隙，现在小伙伴的孩子都会打酱油了，而自己为了生活和梦想依旧在奋斗。怀念青春，就写了这样的一个小游戏。

01

【Java 进阶篇】JavaScript 表单验证详解

JavaScript 表单验证是网页开发中不可或缺的一部分。它允许您确保用户在提交表单数据之前输入了有效的信息。无论您是一个初学者还是一个有经验的开发人员，本文将为您详细介绍如何使用 JavaScript 来进行表单验证。我们将从基础知识开始，逐步深入，以确保您全面了解这个主题。

02

正则表达式中的特殊字符

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

02

前端秘法番外篇----学完Web API,前端才能算真正的入门

众所周知,JS的世界有三大组成部分,ECAMscript掌管语法规则,DOM与HTML文档的解析息息相关,BOM则掌管着浏览器的操作

01

DOM扩展

尽管DOM作为API已经非常完善了，但是为了实现更多的功能，仍然会有一些标准或专有的扩展。对DOM的两个主要扩展是Selectors API（选择符API）和HTML5。

03

jquery对象和dom对象的相互转换

1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getEl

04

jQuery

当Jquery名称冲突时，可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。

02

JavaScript案例：密码框格式提示错误信息

用户如果离开密码框。里面输入个数不是6~16，则提示错误信息，否则提示输入信息正确。

02

jquery属性操作 html() prop()

使用html()相当于原生javascript的innerHtml，即可以获取元素的之间的html内容，还可以创建新的html元素。

02

【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性

JavaScript 是前端开发中不可或缺的一部分，它为我们提供了丰富的工具和技术，以便更好地操作和交互HTML页面。在本文中，我们将重点介绍JavaScript中的 innerHTML 属性，它是DOM（文档对象模型）的一部分，用于操作和更改HTML元素的内容。我们将深入了解这一属性的作用、用法和最佳实践，同时通过实际示例来帮助您更好地理解。

02

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术，除了比较常见的ajax，还有通过iframe来实现，这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。情况1.不输入用户名，登陆失败。情况2.输入用户名，密码正确，登陆成功。上面的效果实现起来很简单，无非就是给按钮绑定点击事件，事件里发送一个ajax请求，请求完成后，回调函数根据返回结果，再操作dom元素。那同样的表单登陆，用iframe如何实现呢？先看前端页面的代码： <!DOCTYPE html> <html l

03

JavaScript 学习-33.HTML DOM 获取和修改文本节点

前言 textContent、innerText 和 innerHTML 三个方法的使用场景和区别 textContent 和 innerText IE 浏览器最早引入了innerText，虽然是IE浏览器私有属性，但是其他很多浏览器也支持了。提到IE，必然是坑！火狐浏览器把innerText换成了textContent , 但其他浏览器上面,也是可以使用textContent。使用区别： textContent 用来设置或获取某个元素内所有文本内容，包含子元素内容，隐藏元素也能获取。 innerTe

02

DOM的核心总结

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言

03

Web API - DOM 第二节（操作元素）

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

01

JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　由于innerText并非W3C标准属性，因此我们无法在FireFox中使用它(修正：FF45+已经支持innerText属性)，一般情况下我们可以使用textContent来代替，但它两者是否就能完全等同呢？在坑爹的表单元素（如input、textarea等）中表现是否依旧诡异呢？文本将记录一些实验结果，避免日后被玩坏。二、innerHTML　　　　　　　　　　　　　　　　　　　　　　　　　　由于innerText和text

07

JavaScript 学习（1）

参考资料：http://www.w3school.com.cn/js/index.asp

04

jQuery之html()的实现

二、jQuery 的 html() 方法（1）当直接调用 $().html()时，.html()的作用是只读取第一个目标元素的innerHTML

01

常见的布局实现

本章主要介绍常见的布局实现，包括： ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局子列固定宽度（设置 absolute、float），主列自适应屏幕（调整margin）。有 absolute + margin、float + margin、float + 负margin 等方式。 <!DOCTYPE html> <html> <head> <title>两列布局</title> <meta charset="utf-8">

06

javascript之DOM操作

http://www.cnblogs.com/kissdodog/archive/2012/12/25/2833213.html

02

总结操作标签的内容

前两期分别给大家总结了获取标签的方法和设置样式的方法，如果想具体了解获取标签的方法和设置样式的方法，可以回复“获取标签”和“设置样式”到“HTML5学堂”公众号。在实现页面交互效果的时候，操作标签的内容是必不可少的，所以今天我们要给大家总结的是操作标签的内容。本文内容概要： 1 innerHTML与outerHTML属性 2 innerText与outerText属性 3 课后作业 1 innerHTML与outerHTML属性前几期我们接触了innerHTML属性，利用它来获取和设置标签的内容，具体我

display:none的元素无法获取offsetWidth和offsetHeight

由上面的代码可以看出，antzone元素的offsetheight是无法正确获取的。

06

documen.write和 innerHTML的区别

document.write和innerHTML是用于在HTML文档中插入内容的两种不同方法。

03

干货 | 前端模板引擎知多少

“ 前端框架日新月异，而其中的数据绑定已经作为一个框架最基础的功能。我们常常使用的单向绑定、双向绑定、事件绑定、样式绑定等，里面具体怎么实现，而当我们数据变动的时候又会触发怎样的底部流程呢？ ” 模板数据绑定数据绑定的过程其实不复杂： 1. 解析语法生成AST。 2. 根据AST结果生成DOM。 3. 将数据绑定更新至模板。解析语法生成AST 抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构

03

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

04

操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

02

2.XML之编程解析示例笔记

描述:在采用JavaScript解析XML时候常常采用AJAX 技术与 XML 的融合,即XML解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

01

2.XML之编程解析示例笔记

描述:在采用JavaScript解析XML时候常常采用AJAX 技术与 XML 的融合,即XML解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

01

黑马程序员----基于BootStrap框架的网页制作综合案例

网页制作综合案例完整源码: 效果演示: ---- 完整源码: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>模板1</title

02

前端成神之路-JavaScript高级第04天

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

02

正则表达式

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

02

【javascript系列】史上最全javascript系列教程（二）

1. onmouseover ⿏标被移到某元素之上 2. onmouseout ⿏标从某元素上⾯移开 3. onchange 元素值改变，⼀般⽤在表单元素上 4. onkeydown ⽤户按下键盘按键 5. onfocus 元素获得焦点 6. onblur 元素失去焦点 7. window.onload ⻚⾯加载完成

03

第85节：Java中的JavaScript

后代选择器：选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组：选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值']

02

JavaScript DOM（二）

通过上文可知获取元素可以来利用 DOM 提供的方法来获取元素，如 getElementById、querySelector 等方法，但是也可以利用节点关系来获取元素

03

javaScript 原生DOM节点操作（最实用的dom节点操作大全）

注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都会是一个数组，那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s 例如：var body = document.ElementsByTagName("body")[0] ("fatherNode"表示父节点，"childNode"表示子节点)

02

前端学习(47)~DOM简介和DOM操作

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

03

JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

1、事件监听机制概述事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。事件源：组件，如按钮、文本输入框；监听器：代码。注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听代码。常见的事件： 1）点击事件：1、onclick：单击事件 2、ondbclick：双击事件 2）焦点事件：1、obblur：失去焦点，一般用于表单校验

02

【如果你要学JS⑧】——[JavaScript-事件]事件三要素，事件处理程序

2.事件类型：如何触发什么事件比如鼠标点击(onclick)，鼠标经过亦或是键盘按键

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭