开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法使用.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);

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

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

有帮助

没帮助

相关·内容

为什么你不应该使用div作为可点击元素

但我们经常倾向于使用其他HTML元素，如 div span 等作为 clickable 元素。但通过这样做，我们错过了许多内置浏览器的功能。我们缺少什么？...无障碍问题（空格键或回车键无法触发按钮点击）元素将无法通过按Tab键来聚焦权宜之计我们需要在每次创建可点击的 div 按钮时，以编程方式添加所有这些功能更好的解决方案始终优先使用 button...作为可点击元素，以获取浏览器的所有内置功能，如果你没有使用它，始终将上述列出的可访问性功能添加到你的div中。...虽然，直接使用按钮并不直观。我们必须添加并修改一些默认的CSS和浏览器自带的行为。使用按钮的注意事项 1. 它自带默认样式我们可以通过将每个属性值设置为 unset 来取消设置现有的CSS。...无论何时使用按钮，如果它不在表单内，请始终添加 type='button' ,因为 submit 和 reset 与表格有关。

2354 1

python测试开发django-166.jQuery 使用append()动态添加div元素

前言在页面上动态添加div元素，比如用户在添加多个银行卡的时候，可以动态添加和删除div元素使用场景用户点添加按钮，能添加一项div,点删除按钮可以删除一项前端结合bootstrap实现添加和删除事件绑定添加和删除事件 clone() 复制一个元素 append() 在元素后面追加一个新的元素 remove() 移除元素 //...= $("#cards>.panel-body>.panel:last-child").clone(); // append() 添加到元素后面 $("#cards>.panel-body

2.1K1 0

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

2.利用视觉欺骗，点击鼠标悬浮的其实是利用JS生成的一个Div，交换信息的两个Div并没有位置交换，只是把双方属性进行了交换。 3.利用了勾股定理去判断距离。 ##效果图如下： ?...//如果这样赋值的话target的innerHTML就会丢失都变成minDiv.innerHTML，所以的设一个中转变量，让两者交换。...background同理 // minDiv.innerHTML = target.innerHTML; //两者样式交换，引入第三变量...2.利用每个div方块都有相对的坐标值，当鼠标按下移动元素的时候，靠近哪个坐标值，靠近坐标值对应的方块就与当前元素进行位置交换。...3.当前demo，只能存在的bug：元素只能进行交换一次，第二次交换时会发生div被覆盖的结果，不过也提供了另一种思路。 ##效果图如下： ? <!

1.5K1 0

鲜为人知的前端知识

hello from address bar'); 需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行...但当你在DOM中无法使用 jQuery 时，你依然可以在开发者控制台中做同样的事情。...页面相关页面拥有ID的元素会创建全局变量 console.log(sample)...; var int3 = parseInt(10 / 3); 补充：保留指定小数位 var num = 1.23456; num.toFixed(3); // 1.235 不声明第三个变量的值交换...delete，删除数组的元素使用splice 使用XMLHttpRequests时注意设置超时 var xhr = new XMLHttpRequest (); xhr.onreadystatechange

5233 1

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

它的主要原因就是，对于一些动态渲染到页面上的字符串，我们无法确保它的安全，里面可能掺杂恶意的攻击脚本。...转义将用户输入、查询字符串、cookie 内容等插入 DOM 时，必须要正确转义这些字符串。通过 .innerHTML 插入未转义的字符串是 XSS 的典型来源。...$div.innerHTML = `hello world` 为了实现正确的消除效果，可能需要将输入字符串解析为 HTML，省略被认为有风险的标签和属性，并保留安全的部分...dropElements：Sanitizer 应移除的元素名称及其子元素。... new Sanitizer({allowElements: []}).sanitizeFor("div", str) // hello world 你还可以使用

7362 0

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

DTD肩负着两重任务:一方面它帮助你编写合法的代码，另一方面它让浏览器正确地显示器代码。...在通常情况下，如果你编写的是正确代码，并拥有一个合适的DTD，浏览器将会根据W3C的标准显示你的代码。良好的xml文档：符合xml的语法规则。...有了DTD，不同组织的人可以使用一个通用DTD来交换数据。应用程序可以使用一个标准DTD校验从外部世界接收来的XML数据是否有效。可以使用DTD校验自己的XML数据。元素的定义 ?...+ "<br / ";//校验的错误信息 rst.innerHTML += "错误行数：" + doc.parseError.line + "<br / ";//出错代码的行数 rst.innerHTML...id="result" </div </body </html PS：这里再为大家提供几款关于xml操作的在线工具供大家参考使用：在线XML/JSON互相转换工具： http://tools.zalou.cn

1.7K2 1

【金九银十】笔试通关 + 小学生都能学会的堆排序

最大堆是堆排序的核心数据结构，它确保了堆顶元素（根节点）是当前堆中的最大值。排序：将最大堆的根节点（即当前堆中最大值）与堆的最后一个元素交换位置。此时，最大值被移动到数组的末尾，并从堆中移除。..., 10, 3, 5, 1]构建最大堆：将 10 放到根节点，堆结构如下： 10 / \ 5 3 / \4 1对堆进行调整后，数组变为 [10, 5, 3, 4, 1]交换堆顶与末尾元素...此时最大元素 10 已排好序。调整剩余部分：调整堆结构，得到 [5, 4, 3, 1, 10]。再次交换堆顶和末尾，得到 [1, 4, 3, 5, 10]。...动态实现下面是一个简单的示例，演示如何使用 JavaScript 实现堆排序，并通过 HTML 来展示排序的过程。<!...操作：清空数组容器 (container.innerHTML = '')。遍历数组，创建每个元素的条形图 (div)。

871 0

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

不幸的是，由于浏览器的限制，使用本地拖放功能无法在IE或Edge上进行延迟 Sortable.create(list, { delay: 400 }); 似乎不让我拖拽 ?...forceFallback 选项如果设置为true，即使我们使用的是HTML5浏览器，也会使用非HTML5浏览器的后备广告。....innerHTML = things2.innerHTML + ('Lorem ipsum dolor sit amet 2, ' + i + ''); things4.innerHTML = things4.innerHTML + ('Lorem ipsum dolor...交换插件该插件修改了Sortable的行为，以允许项目彼此交换而不是进行排序。一旦开始拖动，用户就可以将其拖动到其他项目上，并且元素不会发生任何变化。但是，用户放置的项目将与原始拖动的项目交换 ?

7.1K1 0

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

loadDoc()">更改内容 HTML页面包含一个部分和一个部分用于显示来自服务器的信息...AJAX应用程序可能使用XML传输数据，但以纯文本或JSON文本传输数据同样常见。 AJAX允许通过在幕后与Web服务器交换数据，异步更新Web页面。...GET比POST更简单更快，并且在大多数情况下都可以使用。但是，在以下情况下始终使用POST请求：无法使用缓存文件（更新服务器上的文件或数据库）。向服务器发送大量数据（POST没有大小限制）。...当服务器响应就绪时，将构建一个HTML表格，从XML文件中提取节点（元素），最终使用包含XML数据的HTML表格更新 "demo" 元素： LoadXMLDoc() function loadDoc()...= table; } 在HTML div元素中显示第一个CD 此示例使用一个函数来在具有id="showCD"的HTML元素中显示第一个CD元素：

1110 0

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

在使用Bootstrap的Modal组件时，我们不免要Ctrl+c然后Ctrl+v下面一堆代码 ...el.dataset.resolved = '' el.innerHTML = `<div class="alert alert-warning alert-dismissible fade...(myAlert.el) /* 由于Alert无法正常实现HTMLElement和Node接口，因此无法实现 document.querySelector('#mount-node').appendChild...*/ 即使你能忍受上述的代码，那通过innerHTML实现半声明式的动态元素实例化，那又怎么玩呢？...; 元素间的数据交换: 采用property in, event out的方式与外部上下文环境通信，从而与其他元素进行通信。

8725 0

jquery属性操作 html() prop()

添加文字'); 使用html()相当于原生javascript的innerHtml，即可以获取元素的之间的html内容，还可以创建新的html元素。...id="box1">这是一个div 那么如果执行的使用jquery的html()呢？...id="box1">这是一个div 你可以发现innerHTML和html()都是可以解析html基本元素语句，这个才是可以执行脚本的关键。...关于评论中说innerHTML不能执行脚本, 继续真相图： ? 其实，关键一点是看方法是否有解析html标签等元素，如果不能解析，就无法执行脚本。...例如：使用innerText就无法执行脚本，如下： ? 哦，还有jquery的text()也是无法解析html，所以也无法执行脚本 ? 大概如此，祝五一快乐！

2.2K2 0

学会正确使用一些form表单元素：提升网页表单质量

元素（支持多选）用于创建一个支持多选的下拉列表。... 元素用于对选项进行分组： label 属性用于为分组指定标签，以描述该组的类别。每组内包含多个元素。... 元素的 value 属性用于指定选项的值，若为空，则默认使用选项的文本作为值。...通过标签为每个单选按钮提供了对应的文本描述，并使用for属性与相应的元素的id属性关联，以提高用户交互性。...其中每个元素代表一个可选项，value 属性指定了实际的值，元素内的文本为显示给用户的描述。

891 0

事件基础及操作元素

标准保留空格和换行的 div.innerHTML = '今天是： 2019'; // 这两个属性是可读写的可以获取元素里面的内容....className = 值; 因为class是关键字，所有使用className。...使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用 var test = document.querySelector('div'); ..."message">请输入6~16位密码 // 首先判断的事件是表单失去焦点 onblur // 如果输入正确则提示正确的信息颜色为绿色小图标变化...= '您输入的正确'; } }

1.4K2 0

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

testDiv").innerHTML ="动态创建的div"; 而且用的应该是还是乐此不疲，但是有多少人知道这是错误的做法!...所以也不是完全否定innerHTML函数的使用. 所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程....关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: 第一种正确方式： //使用Dom标准创建元素 var select = document.createElement("select...创建元素: $(" ").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv); 否则使用innerHTML方法创建元素...: //jQuery内部使用innerHTML创建元素: $(" 动态创建的div ").appendTo(testDiv) （引自：http://kb.cnblogs.com/page/46453

2.2K2 0

javascript前端XML格式正确性验证方法

xml格式的正确性。...line 1 at column 1: Document is empty 这么一串错误信息。...而如果是Safari和chrome浏览器返回的文档包含标签，但是该元素只会出现在解析错误的地方，因此通过xmlDoc.documentElement.nodeName这种方式是无法获取是否解析错误...正确，1是xml错误，2是无法验证 var xmlDoc,errorMessage,errorCode = 0; // code for IE if (window.ActiveXObject...else { errorCode = 2; errorMessage = "浏览器不支持验证，无法验证xml正确性"; } return {

3.4K5 0

jQuery

选择器（1）元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取元素。...$("div#intro .head") 选取id="intro" 的元素中的所有 class="head" 的元素（2）属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素...div> 后代的所有元素： $(document).ready(function(){ $("div").find("span"); $("div").find("*"); /...AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。 0. 原理 XMLHttpRequest 用于在后台与服务器交换数据（老版本使用 ActiveX 对象）。...无法使用缓存文件（更新服务器上的文件或数据库） 2. 向服务器发送大量数据（POST 没有数据量限制） 3.

16.4K2 0

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

本章节只是分享一个事实，那就是如果一个元素被设置为display:none的话。我们是无法获取offsetWidth和offsetHeight属性值的。代码实例如下: <!...document.getElementById("show"); var obt = document.getElementById("bt"); obt.onclick = function () { oshow.innerHTML...= oantzone.offsetHeight; } } 由上面的代码可以看出，antzone元素的offsetheight是无法正确获取的

1.7K6 0

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

(没有排过顺序, 难度等级低) 1.猜数游戏生成0-100的随机数, 开个输入框让用户输入, 小于随机数时显示小了, 大于随机数时显示大了, 等于时显示正确....= document.querySelector("#div"); fyl_poem.innerHTML = fyl_poem_arr[fyl_i];...() * fyl_div_color.length)]; fyl_poem.innerHTML = fyl_poem_arr[fyl_i]; }...() * fyl_div_color.length)]; fyl_poem.innerHTML = fyl_poem_arr[fyl_i]; }.../script> 9.解构赋值使用解构赋值的方法, 交换两个变量的值 <meta charset="UTF-

4673 0

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

前言 textContent、innerText 和 innerHTML 三个方法的使用场景和区别 textContent 和 innerText IE 浏览器最早引入了innerText，虽然是IE...火狐浏览器把innerText换成了textContent , 但其他浏览器上面,也是可以使用textContent。...使用区别： textContent 用来设置或获取某个元素内所有文本内容，包含子元素内容，隐藏元素也能获取。...\n" + div.textContent); console.log("这是innerText：\n" + div.innerText); innerText 无法获取子元素...; // console.log(div.innerHTML); // div.innerHTML 获取的是div下的全部html代码内容 div.innerText 仅仅只获取文本内容

1.6K2 0

【金九银十】笔试通关 + 小学生都能学会的选择排序

开始时，已排序部分为空，而未排序部分包含所有元素。第一轮：从未排序部分中找到最小的元素，将其与未排序部分的第一个元素交换位置。这时，已排序部分包含了一个元素，即当前找到的最小元素。...第二轮：继续在剩下的未排序部分中找到最小元素，再将其与未排序部分的第一个元素交换。这时，已排序部分包含两个元素，且这两个元素是按顺序排列的。...算法设计的一个重要目标是尽可能减少交换操作，因为交换通常需要较多的资源。选择排序通过每轮只进行一次交换（在找出最小元素后），在这方面表现得相对高效。选择排序的故事可以和早期的“打牌”经验联系在一起。...数组：[11, 12, 22, 25, 64]已排序部分：[11, 12, 22]未排序部分：[25, 64]第四轮：在未排序部分 [25, 64] 中找到最小值 25，无需交换，因为它已经在正确的位置...使用数组解构交换两个元素的位置。renderArray(arr);调用 renderArray 函数，重新渲染数组的可视化表示，让用户看到当前数组的变化。

971 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭