问题标签 [insertadjacenthtml]

所以我一直在编写脚本，当用户单击 + 按钮时，它会在 addnew div 之前添加一个新按钮。

据我了解，我遵循了正确的设置来设置 insertAdjacentHTML

https://codepen.io/russellharrower/pen/rzxLRj

html

JS

我正在尝试从数组（JSON 编码值）动态加载一些链接作为 div 内的列表。在我的真实应用程序中，这个数组来自 PHP。
我insertAdjacentHTML('beforeend', "link content")用来设置内容。

为了样式相同，我使用“手风琴滑块”和“完美滚动条”，我已经成功地将两者结合起来。我可以在 div 中显示我想要的链接，但现在滚动条似乎消失了。

请在此处检查小提琴 - https://jsfiddle.net/prashu421/2mpL61x7/
如果您要检查未动态加载的链接是否可滚动并且滚动条显示在那里。

对于我的案例，我在互联网上找不到任何明确的参考资料。

任何帮助是极大的赞赏。
感谢您的考虑。

您好我有一个简单的问题，我需要lblWelcomeUserMessage.innerHTML = ""; ( see below in code )在下面的函数中指定before insertAdjacentHTML它吗？它实际上可以在没有声明的情况下工作，但我想知道optimal approach?

在元素及其容器上调用 React 渲染时，如何指定相对于元素的位置？

即
ReactDOM.render(element, document.getElementById('divInTheBody'));

假设我想在元素本身之前插入这个元素（'beforebegin'）。我怎么做？

https://reactjs.org/docs/react-dom.html#render
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

我有一群学生，应该通过单击“button-newPairs”按钮随机配对。这些对应显示在 8 个 div 中“一对一”、“对二”、...，其中包含两个跨度“studentOne”和“studentTwo”。我在控制台中获得了对，但不是通过单击“button-newPairs”按钮获得的，而且我不知道如何在我的跨度中更改或插入文本内容。有人能帮助我吗？先感谢您。

I am able to add the elements I want, but after I refresh they disappear. How can I get the elements to save permanently while using insertAdjacementHTML or do I need to use another method?

Sample code:

我目前正在制作一个小型待办事项列表应用程序。我正在使用 insertadjacentHTML 添加新的待办事项（如下所示），但刷新后它们消失了。将这些项目永久保存到 DOM 的最佳方法是什么。我打算使用 MongoDB 来提供待办事项数据，我可以使用 mongo 保存/删除它们的 DOM 吗？

I have a very long text wrapped in a single <p> tag. like this:

I need to break up that text into smaller paragraph chunks by using javascript or jquery to insert </p><p> into certain parts of the text, Effectively ending the last paragraph and then starting a new one (I already have some javascript which identifies where I want to insert the new HTML - that works fine). I've been using insertAdjacentHTML() to add the new paragraph tags:

The trouble is: the browser tries to fix my partial html and keeps wrapping it in additional <p> tags like this:

As a result: the extra <p> tags break my pagination script (from easyPaginate) which otherwise works great.

Is there a better way to insert partial HTML without the browser "fixing" it by adding additional <p> tags? (the issue occurs in both firefox and chrome)

我正在从一个 wheather API 请求数据，我需要将结果显示到一个表中。我必须使用 inserAdjacentHTML 或其他 DOM 方法将标记添加到我的 div。我遇到的问题是，对于每个请求，它都按预期添加一个新表。但我想清除结果以显示新数据。现在我不能对元素使用innerHTML = ''，因为它首先是在insertAdjacentHTML 中创建的。是否有解决方案以某种方式替换、清除添加到 DOM 的标记？

目标：仅在 ajax 调用（添加或删除标签）后重新加载 div，而不会丢失重新加载的 div 上的事件侦听器。使用insertAdjacentHTML似乎不是最佳的。

前端：我有一个带有 ul/li 标签的侧边栏。有一个添加/创建标签的模式；每个标签旁边都有一个图标“X”，可以在点击时将其删除。

我失败的设置是：

1. 向 php 后端发送 ajax (fetch) 调用以添加或删除标签

2. 如果没有错误，后端会为文章发送一个更新的、twig 格式的标签列表

3. 用 . 更新了 div innerHTML。

更新将丢失列表的innerHTML所有事件侦听器（例如单击 X 时删除标记），直到真正刷新页面。我试图在 ajax 调用之后运行 addeventlisteners，但它没有用。

我当前的设置基于以前的 SO 答案（见下文）使用insertAdjacentHTML. 这（有点）有效，但它很笨重。

• 删除标签不是插入问题，我所能想到的就是在点击时隐藏标签，直到页面刷新。
• 添加标签是将新标签附加insertAdjacentHTML到列表中，但它不再按字母顺序排列，我必须使用一些 hacky javascript 来格式化输出以匹配现有列表。

我真的更喜欢让 php 为 div 发送一个完整的更新和格式化列表。

有什么建议可以用更优雅的方式在 vanilla js 中执行此操作吗？

仅供参考：我依赖的主要答案：
为什么事件侦听器在使用 element.innerHTML 后会停止工作？
是否可以在不破坏后代事件侦听器的情况下附加到 innerHTML？
如果移除了一个 DOM 元素，它的监听器是否也会从内存中移除？
JS eventListener点击消失

编辑：监听器附加到“li-untag”类

编辑 2：回答更多代码的评论请求。这是使用原子 ajax 库删除标签的内容：