问题标签 [insertadjacenthtml]

当尝试在不使用document.createElement()浏览器的情况下为已经存在的元素设置值时，会显示所需的结果，但是，当我使用它时，document.createElement()我得到[Object HTMLElement]但控制台中没有错误。

例如，以下代码按预期工作：

但是，如果我在创建它之后附加headingText到标题元素，document.createElement()那么我会得到[Object HTMLElement]意想不到的结果。

这是什么原因？

注意：我对解决方案不感兴趣，因为我已经有了一个，正如可以看到的，我对导致该问题的原因和原因背后的推理、逻辑感兴趣。谢谢你。

我曾尝试在谷歌上搜索答案，但找不到答案。我得到的最接近的是stackoverflow上的这个问题：`insertAdjacentHTML`和`createElement`

但是，这并不能回答我的问题。

在我当前的项目中，我收到了 xhr 请求，我将它们放在像这样的元素之后：el.insertAdjacentHTML('afterend', "foo bar"); 但我还没有找到在给定之后删除所有内容的方法element，否则标记将被填满。

dom我可以在它周围包裹另一个容器，但出于性能原因，我尝试使用尽可能少的元素。

我找到了几个解决方案JQuery，这也不是一个选项，因为它太大了。

假设我有一个nav元素位于其父容器的顶部，我想在它之后放置东西，但在我必须删除之前存在的东西之前。

有任何想法吗？提前致谢

在网上搜索，在这里，刚刚找到 jq 解决方案，没有 vanilla js。

JS

HTML

JSII - 我正在尝试这样的东西，但它似乎并没有选择所有元素。建议？

我找到了自己的解决方案，感谢四位帮助！

我有一个小代码尝试使用 HTML 输入将值附加到同一个文档。

变量child不从输入中获取文本值，其输出为“未定义”

图一：打字Test

图 2：单击按钮

如何从输入中获取值作为 New ParaTest？

使用答案编辑的代码。

我想在和usinginput type=text之间插入一个字段，但它不起作用。插入字符串而不是元素。pinput type=submitinsertAdjacentHTML[object HTMLInputElement]input

我错过了什么？如果有更优雅的方法可以做到这一点，请分享。

这是我的代码：

我正在尝试在insertAdjacentHTML()函数之后更改我的 className。我为此使用了 AJAX 请求，并且路由/reviewcombine来自我的后端 JavaScript 代码。

我的代码：

在这里，我试图将我的星星更改为橙色并根据ratings值显示它。

但是，在函数之后执行此insertAdjacentHTML操作只会永久更改类名。随后的循环使用的是fa fa-star checked类而不是fa fa-star它们应该使用的类。（在insertAdjacentHTML函数之前做也是不可能的）

这是我得到的输出示例：

有人可以帮我找出这里的错误吗？任何相关来源也将是一个很大的帮助。非常感谢！

所以我现在搜索了5个小时，没有得到任何答案。

情况：我正在将数据库中的内容加载到我的 HTML 站点并使用 insertAdjacentHTML 将其插入。内容也正确显示，所有数据都在这里。单击之前插入的元素之一时，我想展开卡片。我的事件侦听器适用于我的测试 HTML 内容，但不适用于插入的内容。整个事情都不起作用，因为 .querySelectorAll 返回一个空的 NodeList。

我试图放置脚本，将内容加载到头部和将事件侦听器保存到最后的脚本，但没有任何变化。实际上，使用开发者工具观看时，内容在 HTML 文件中。

希望任何人都可以帮助我：D

这是模板：

这是事件监听器：

一切正常，但在最后一行我的 id 没有显示。它显示的是 %id% 而不是实际数据。

问题

1. 我想从 1 开始 id 但它从 0 开始。我不明白如何让它从 1 开始。
2. insertAdjacentHTML 未显示 ID。它在 js 代码的最后一行。

我已经从 JavaScript 数据生成了我的 Header。

要生成我正在迭代一个对象。

生成 HTML 如下所示：

当我检查元素时，它包含以下奇怪的数据（Chrome Inspector 输出）：

我怎样才能摆脱数据，因为当我点击最后一个元素（“视觉设计”）时，控制台会抛出错误，我无法添加更多代码。

单击生成的 3 个项目后的控制台输出：

我集成了 Bootstrap 4 CDN 和 fontawesome。

这个项目是一个小型的移动网站。我想通过 JS 动态地为参考书目提供 HTML。这是在 Firefox 中完美运行的代码：

这是代码在 Firefox 中的样子：Bibliography Desired View 这是它在其他浏览器中的样子：Other Browser's Broken view

我在 Firefox 中没有收到错误消息，但例如 Chrome 中的错误如下：

我不知道如何解决这个问题。是抓取问题吗？身份问题？forEach 循环问题？究竟是什么阻止了边框属性在其他浏览器中实现？大多数现代浏览器（ES6、Arrow Functions、InsertAdjacentHTML 等）都应该支持我使用的所有 JS，所以这对我来说是一个令人头疼的问题。

预先感谢您的任何帮助！

我目前正在构建一个待办事项列表应用程序，并且我已经使用 localStorage API 保存了数据。

但是，每当我 console.log 时，所需的数据就会出现在控制台中，但它仍然没有保存在 DOM 中。

我还添加了该getItem()功能并将其登录到控制台，我仍然可以在控制台中查看它，在这里找到： 控制台中的getItem内容

但它只是不存储在浏览器中

看到这一点，您倾向于认为它应该存储在 DOM 中，并且在重新加载后内容仍然存在，但这里的情况并非如此。

下面的这个函数将一个新项目添加到列表中，它也会删除和划掉已完成的项目：

我也尝试在 addTaskFunc 中这样做：

当我使用上面的方法尝试时，我在控制台中收到错误代码：无法读取 null 的 addEventListener 的属性。

我觉得某处有问题，但我似乎无法找出我错过的地方。

最后一件事，localStorage 似乎只将一项存储到密钥中。我需要一个循环来解决这个问题吗？