通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。
Bootstrap 5 Carousel 在页面加载后不会自动播放
这个标准 Bootstrap 5 轮播代码... 这个标准 Bootstrap 5 轮播代码... <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="2.jpg" class="d-block w-100" alt="..."> </div> </div> </div> ...页面加载时在 html 文件中自动播放。 但是，当页面加载后将相同的代码添加到 DOM 时： $('#previous-div').after(carouselHTML); ...轮播不会自动播放。 页面加载后将轮播添加到 DOM 时，我需要采取哪些步骤才能让轮播自动播放？ 根据 docs，具有 data-bs 属性的 Carousel 组件会在页面加载时自动初始化，因此稍后添加它们将不起作用。 因此，您可以使用 JavaScript 手动实例化它。 您似乎使用的是 jQuery，因此 BS 组件自动可用，因此您可以通过将 cycle 传递给 .carousel 方法来实例化轮播： $('#previous-div').after($(carouselHTML).carousel('cycle')); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="previous-div"></div> <script> $(document).ready(function() { const carouselHTML = ` <div id="carouselExampleSlidesOnly" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> </div> </div> `; $('#previous-div').delay(2000).after($(carouselHTML).carousel('cycle')); }); </script> </body> </html>
我正在对如何在 JavaScript 中使用表单元素进行简单的实际测试，但我不太明白出了什么问题。我检查了网络浏览器的萤火虫，控制台没有给出错误，...
File 对象中 webkitRelativePath 属性的用途是什么？
如果您在 Chrome 控制台中打印 File 对象，如下所示： 您会在其他属性中看到始终为空的
我在 Laravel 应用程序中有一个父组件和子组件，并且希望为数组中的每个元素渲染一个 TextInput。 但是，我在将数据从父级传递给子级时遇到问题。它是...
我的代码使用下面的 HTML。 这是 ID 为“myId”的元素的原始内容。 <... 我的代码使用下面的 HTML。 <body> <div id="myId" class="oldClass"> This is the original content of the element with ID "myId". </div> </body> 我正在使用下面的DOM Manipulation执行JavaScript Code: const myElement = document.getElementById('myId'); myElement.setAttribute('data-example', 'value'); console.log(myElement); myElement.removeAttribute('data-example'); console.log(myElement); 但是，first console.log() statement 不显示 data-example 属性。 <div id="myId" class="oldClass"> This is the original content of the element with ID "myId". </div> 您遇到的问题与浏览器处理 console.log() 的方式及其处理 DOM 元素的方式有关。当您使用 console.log(myElement) 时，它会记录对 DOM 节点的引用，而不是该节点当时的静态快照。如果您在记录后操作 DOM，当您在浏览器的开发人员工具中展开记录的元素引用时，这些更改将反映在记录的元素引用中。 为了避免这种混乱并在记录元素时捕获它存在的元素，您可以直接记录特定的属性或值，而不是元素引用。
使 ReactDOM.createPortal 插入元素作为目标容器的第一个子元素（而不是最后一个子元素）
所以我使用 ReactDOM.createPortal 在正常 DOM 放置之外渲染一个元素。我必须这样做，因为我正在与一个创建它自己的元素的库进行交互（超出我的范围）并且我
我没有 javascript 和 typescript 的经验。当我使用 PHP 时，我将导航栏制作成一个可以回显 html 代码的函数。这也可以使用打字稿来实现吗？我做了一个功能...
php DOMElement->replaceWith() 的奇怪问题
我看到一些奇怪的行为，但我无法调试。该代码来自 WordPress 短代码变体的简单实现。 代码循环遍历 DOMNodeList（自定义...
我读过很多帖子，人们询问如何对 XML 元素强制执行某种属性顺序，一般的回答是它不合法/必需/允许/相关/其他。 我不是...
我正在做这个 GPS 项目，遇到了一个问题。我想构建一个由 360x180 网格项组成的网格，每个网格项代表一个 GPS 坐标，它动态地获取自己的...
Safari 的 getBoundingClientRect() 实现返回不正确的顶部
我有一个带有 float: right 的 div，我试图获取它与视口顶部的距离。在除 Safari 之外的每个浏览器中，我都从 element.getBoundingClientRect() 获得了预期的结果....
为什么表单按钮对页面 DOM 所做的更改在一段时间后会自动恢复？
我想要做的是交换两个 HTML DOM 节点。 让我们采用以下 HTML 列表和下面的交换按钮： 0 ... 我想要做的是交换两个 HTML DOM 节点。 让我们采用以下 HTML 列表和下面的交换按钮： <ul class="center-text"> <li>0</li> <li>1</li> <li>2</li> </ul> <form class="center-text"> <button id="swapButton">Swap</button> </form> 这是我的 JS 代码： // the "ready" method is the only jQuery method used in the code $(document).ready(function(){ document.getElementById("swapButton").onclick = function() { var ul = document.getElementsByTagName("ul")[0]; // pseudo-swapping: insert "child2" before "child0" // (indexes are 1 and 5 because of the TextNodes between list nodes) ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 因此，单击交换按钮时会发生以下情况： 物品确实被交换了。但不知何故，在（比方说 1/4）秒后，它们会恢复到原来的位置，即自动交换回来。 我的问题是：为什么？ PS：该代码仅用于教育目的，我只是尝试了解幕后发生的事情，所以请不要发布任何替代的 jQuery 方法。 $(document).ready(function(){ document.getElementById("swapButton").onclick = function(e) { e.preventDefault(); var ul = document.getElementsByTagName("ul")[0]; ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 这是因为按钮将页面重定向到同一页面。并恢复全部。您需要防止按钮的默认行为。
JavaScript id 详细信息显示一个结果，与 id 无关
我正在使用 NY Times api 使用 javascript 创建一个图书应用程序，用户可以通过单击任何一本书来查看图书详细信息。我使用来自 a...的 Primary_isbn10 为每本书指定了不同的 id...
如何将事件委托添加到单选按钮上的“更改”事件（而不是单击）？
我经常使用类似代码的父元素上的“click”事件轻松实现事件委托 HTML： 我经常使用类似代码的父元素上的“单击”事件轻松实现事件委托 HTML： <div> <span> <input type="radio" id="all0" name="difficulty-ask" class="difficultyaskclass" value="all" checked="checked" /> <label for="all0">All</label> <input type="radio" id="2easy1" name="difficulty-ask" class="difficultyaskclass" value="easy" /> <label for="2easy1">Easy</label> <input type="radio" id="2med2" name="difficulty-ask" class="difficultyaskclass" value="medium" /> <label for="2med2">Medium</label> <input type="radio" id="2hard3" name="difficulty-ask" class="difficultyaskclass" value="hard" /> <label for="2hard3">Hard</label> </span> </div> JS： parentelement.addEventlistener('click', (event) => { if(event.target.classList.contains('targetelement'){Code..}}; （父元素只是一个常规的div，其中放置了单选按钮） 如果单选按钮切换状态，它现在如何处理“更改”事件？ 我首先通过循环遍历所有这些，然后为每个添加一个事件监听器来使其工作。但这显然不是理想的解决方案，我肯定需要一些事件委托。 您可以使用 input 事件，该事件对任何表单元素也有效 演示： const myForm = document.forms['my-form']; myForm.addEventListener('submit', e => { e.preventDefault(); // disable submit - page reload const formValues = Object.fromEntries(new FormData(myForm).entries()); console.log( formValues ); setInterval(console.clear,8000); }) myForm.addEventListener('input', e => { if (!e.target.matches('input[type="radio"]')) return; console.log(myForm['difficulty-ask'].value); setInterval(console.clear,2000); });label { display:block; } fieldset { width: fit-content; }<form name="my-form"> <fieldset> <legend> difficulty </legend> <label> <input name="difficulty-ask" type="radio" value="all" checked > All </label> <label> <input name="difficulty-ask" type="radio" value="easy" > Easy </label> <label> <input name="difficulty-ask" type="radio" value="medium" > Medium </label> <label> <input name="difficulty-ask" type="radio" value="hard" > Hard </label> </fieldset> <button>submit</button> </form>
如何在不操作DOM的情况下以角度操作/复制ElementRef？
我有一个近 200 行的格式化 html 表格，我必须将其导出为 PDF。目前我正在使用 jsPDF 库。 制作PDF() { var elWidth = this.el.nativeElement.getBoundingClientRect().width ...
首先，这不是问如何将 NodeList 转换为 Array。这是相反的。 为了保持一致性，我想创建一个返回 NodeList 的函数，就像...
如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？
我希望从 API 获取数据并使用 JavaScript 获取功能在 HTML 页面中显示。 JavaScript 代码详述如下。我可以从API读取用户数据的console.log。然而，n...
即使在 tic tac toe 游戏中轮到玩家二后，事件侦听器也会添加到玩家一
回合确实切换，新选择的点被添加到playerTwo数组中，但它也被添加到playerOne中。我已经移动了部分代码，但这并不能解决问题。 const 游戏板 = ((...
如何附加 HTML 字符串，例如 var str = '这里只是一些文字'; 到带有 id 测试的 ？ （顺便说一句 div.innerHTML += str; 是不可接受的。） 如何附加 HTML 字符串，例如 var str = '<p>Just some <span>text</span> here</p>'; 到 id 为 <div> 的 test？ （顺便说一句div.innerHTML += str;是不可接受的。） 使用 insertAdjacentHTML 当前所有浏览器都支持: div.insertAdjacentHTML( 'beforeend', str ); 位置参数beforeend将添加到元素内部，在其最后一个子元素之后。 现场演示：http://jsfiddle.net/euQ5n/ 性能 AppendChild (E) 比 Chrome 和 Safari 上的其他解决方案快 2 倍以上，insertAdjacentHTML(F) 在 Firefox 上速度最快。 innerHTML= (B)（不要与 += (A) 混淆）是所有浏览器上第二快的解决方案，它比 E 和 F 方便得多。 详情 设置环境 (2019.07.10) Chrome 75.0.3770 (64 位)、Safari 11.1.0 (13604.5.6)、Firefox 67.0.0 (64 位) 上的 MacOs High Sierra 10.13.4 Chrome E（每秒 140k 操作）最快，B (47k) 和 F (46k) 次之，A (332) 最慢 在 Firefox 上 F (94k) 最快，然后是 B(80k)、D (73k)、E(64k)、C (21k) 最慢的是 A(466) 在 Safari 上 E(207k) 最快，然后是 B(89k)、F(88k)、D(83k)、C (25k)，最慢的是 A(509) 您可以在您的机器上重播测试这里 function A() { container.innerHTML += '<p>A: Just some <span>text</span> here</p>'; } function B() { container.innerHTML = '<p>B: Just some <span>text</span> here</p>'; } function C() { $('#container').append('<p>C: Just some <span>text</span> here</p>'); } function D() { var p = document.createElement("p"); p.innerHTML = 'D: Just some <span>text</span> here'; container.appendChild(p); } function E() { var p = document.createElement("p"); var s = document.createElement("span"); s.appendChild( document.createTextNode("text ") ); p.appendChild( document.createTextNode("E: Just some ") ); p.appendChild( s ); p.appendChild( document.createTextNode(" here") ); container.appendChild(p); } function F() { container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>'); } A(); B(); C(); D(); E(); F();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This snippet only for show code used in test (in jsperf.com) - it not perform test itself. <div id="container"></div> 这样可以接受吗？ var child = document.createElement('div'); child.innerHTML = str; child = child.firstChild; document.getElementById('test').appendChild(child); jsFiddle. 但是，尼尔的答案是一个更好的解决方案。 这个想法是在中间元素上使用 innerHTML，然后通过 appendChild 将其所有子节点移动到您真正想要的位置。 var target = document.getElementById('test'); var str = '<p>Just some <span>text</span> here</p>'; var temp = document.createElement('div'); temp.innerHTML = str; while (temp.firstChild) { target.appendChild(temp.firstChild); } 这可以避免清除 div#test 上的任何事件处理程序，但仍然允许您附加 HTML 字符串。 正确的方法是使用insertAdjacentHTML。在 Firefox 8 之前的版本中，如果您的 Range.createContextualFragment 不包含 str 标签，您可以回退到使用 script。 如果您的 str 包含 script 标签，则需要在插入片段之前从 script 返回的片段中删除 createContextualFragment 元素。否则，脚本将运行。 （insertAdjacentHTML 标记脚本不可执行。） 快速破解： <script> document.children[0].innerHTML="<h1>QUICK_HACK</h1>"; </script> 用例： 1：另存为.html文件并在chrome或firefox或edge中运行。 （IE不能用） 2：在http://js.do中使用 实际行动： http://js.do/HeavyMetalCookies/quick_hack 细分评论： <script> //: The message "QUICK_HACK" //: wrapped in a header #1 tag. var text = "<h1>QUICK_HACK</h1>"; //: It's a quick hack, so I don't //: care where it goes on the document, //: just as long as I can see it. //: Since I am doing this quick hack in //: an empty file or scratchpad, //: it should be visible. var child = document.children[0]; //: Set the html content of your child //: to the message you want to see on screen. child.innerHTML = text; </script> 我发帖的原因： JS.do 有两个必备条件： 没有自动完成功能 垂直显示器友好 但不显示console.log消息。 来到这里寻找快速解决方案。 我只想看看结果 几行暂存器代码， 其他解决方案的工作量太大。 这个可以解决 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>'); InnerHTML 清除现有节点的所有数据，例如事件 使用firstChild附加子项仅将第一个子项添加到innerHTML。例如，如果我们必须附加： <p>text1</p><p>text2</p> 仅显示text1 这个怎么样： 通过附加子项将特殊标签添加到innerHTML，然后通过删除我们创建的标签来编辑outerHTML。不知道它有多聪明，但它对我有用 或者您可以将outerHTML更改为innerHTML，这样就不必使用函数replace function append(element, str) { var child = document.createElement('someshittyuniquetag'); child.innerHTML = str; element.appendChild(child); child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, ''); // or Even child.outerHTML = child.innerHTML }<div id="testit"> This text is inside the div <button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button> <button onclick="append(this, 'some text')">to this</button> </div> 为什么不可接受？ document.getElementById('test').innerHTML += str 将是教科书式的做法。 最短 - 18 个字符（不要混淆 +=（OP 提及）与 = 更多详细信息此处） test.innerHTML=str var str = '<p>Just some <span>text</span> here</p>'; test.innerHTML=str<div id="test"></div> 我的问题的答案就是这样；一个带有空值的简单 Map；我所能得到的只是一个非常沉重且不精确的答案。我想知道谁结束了我的问题...甚至懒得阅读 "use strict" try { const fruits = new Map([["Banana",""],["Apples", ""], ["Orange"," "]]); let text = "<h1>Fruits</h1>" + "<ul>"; fruits.forEach(function(value, key){ text += "<li>" + key + value + "<br>" + "</li>" }); text +="</li> "; document.getElementById('demo').innerHTML = text; } catch(err){ document.getElementById('theError').innerHTML = err; }