转换在insertAdjacentHTML之后不起作用
在前端开发中，insertAdjacentHTML是一个用于在DOM中插入HTML代码的方法。它可以在指定的位置插入新的HTML内容，而不会破坏原有的DOM结构。
然而，有时候在使用insertAdjacentHTML方法插入HTML代码后，可能会遇到转换不起作用的问题。这可能是由于以下几个原因导致的：
- 插入的HTML代码中包含了错误的语法或格式问题，导致浏览器无法正确解析和渲染。在这种情况下，可以通过检查HTML代码的语法和格式，确保其正确性。
- 插入的HTML代码中包含了与现有DOM元素冲突的ID或类名。如果插入的HTML代码中包含了与已有元素相同的ID或类名，可能会导致样式或脚本失效。解决方法是确保插入的HTML代码中的ID和类名是唯一的，不与已有元素冲突。
- 插入的HTML代码中包含了需要依赖其他脚本或样式文件的内容。如果插入的HTML代码中包含了需要依赖其他脚本或样式文件的内容，而这些文件没有正确加载或引入，可能会导致转换不起作用。解决方法是确保所有依赖的脚本和样式文件都正确加载和引入。
- 插入的HTML代码中包含了需要等待其他操作完成后才能生效的内容。有时候，插入的HTML代码中包含了需要等待其他操作完成后才能生效的内容，比如异步请求数据后再进行渲染。在这种情况下，可以通过使用回调函数或Promise等方式确保插入的HTML代码在相关操作完成后再进行转换。
总结起来，转换在insertAdjacentHTML之后不起作用可能是由于HTML代码语法错误、ID或类名冲突、依赖文件加载问题或需要等待其他操作完成等原因导致的。解决方法是检查HTML代码的正确性、确保ID和类名的唯一性、正确加载依赖文件以及确保转换发生在相关操作完成后。
相关·内容
在我的javascript程序中，我创建了div，并使用innerHTML在div中添加了图像和一些硬编码的文本。但是我试图在文本和图像之间添加动态的br标记。首先应该显示文本，然后想要换行，然后显示图像。所以创建了br，并添加了，但是不知怎么的，它不起作用。有人能纠正我吗？
代码：
function useInnerHTML() {
var movieText2 = prompt("One of my favourite movies");
var textNode = document.createTextNode(movieText2);
ele.ap
浏览 4提问于2017-10-07得票数 0
回答已采纳
如何从数组动态创建HTML元素？
例如，如果我得到一个数组const data = ['123', '456', '789']，并且我想为数组的每个值创建一个p标记。我尝试过使用foreach方法，但它不起作用，到目前为止，我做错了什么？以下是代码：
const ct = document.querySelector('.ct');
const data = ['123', '456', '789'];
const createNewElement =
'<p&
浏览 14提问于2022-05-26得票数 1
回答已采纳
为什么要做以下两件事：
document.body.innerHTML = '<div>Test1</div>';
document.body.insertAdjacentHTML('beforeEnd', '<div>Test2</div>');
这也起作用了：
document.body.attachShadow({mode: 'open'}).innerHTML = '<div>Test3</div>';
但以下几点不起作用：
docu
浏览 2提问于2021-03-17得票数 2
回答已采纳
我有一些代码来添加一些HTML，并为它们附加一个侦听器，奇怪的是，当我向页面添加更多内容时，先前添加的元素的eventlisteners不起作用。
JS：
(function() {
document.body.innerHTML = "<div class=\"container\"></div>";
document.querySelector(".container").innerHTML += "<p class=\"red\">RED</p>
浏览 3提问于2018-11-24得票数 1
<html>
<head>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" name="pic" accept="image/*" id="insert-file" class="ins=file"
浏览 12提问于2022-06-16得票数 0
这可能是一个愚蠢的问题，但我实际上从来没有这样做过，我正在尝试的是不起作用的。
我有两个文件
test.html
test.js
我将js链接为test.html中的外部
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
浏览 18提问于2018-06-22得票数 1
我使用了两个类，如类:在和类之前:在IE7中，用于圆角目的的after，但在IE7中不起作用。你能帮帮我吗？
.round:before{backgourn:url(top-bg.png) no.repeat top left;}
.round:after{backgournd:url(btm-bg.png) no.repeat bottom left;}`
浏览 0提问于2012-07-09得票数 0
我在Javascript函数中创建了一个数组。现在，当我按下html页面上的一个按钮时，我想将这个数组传递给php脚本。我试图传递它，调用以下函数：
function transferarray(param){
$.ajax({
type:"POST",
url:'selection.php',
data:{param:param}
});
HTML-链接：
<a href='selection.php' id="counter" onclick="transferarray(arr)"
浏览 1提问于2017-09-01得票数 0
我总是使用appendChild向其他元素添加内容，因为如果我使用：
innerHTML += 'added stringgggggggggg';
然后，这会用填充的值弄乱动态元素，例如<form> (它会将字段值重置为空)。
在不使用appenChild和JQuery的情况下，有没有更简单的方法将smth添加到元素中？
浏览 8提问于2016-08-15得票数 2
回答已采纳
1回答
这是我的ajax代码
<script type="text/javascript">
$('#right_make').change(function() {
var make = document.getElementById('right_make').value;
alert(make);
$.ajax({
url: 'get.php',
async: true,
cache: false,
data:
浏览 2提问于2017-08-26得票数 2
在下面的代码中，我试图传递用于调整列大小的鼠标坐标。它在铬中工作，但在IE11中不起作用，event.movementX在IE11中总是没有定义，有人能给出解决方案：
private mouseDown(): void {
document.addEventListener("mouseup", this.mouseUp);
document.addEventListener("mousemove", this.mouseMove, true);
}
private mouseMove(event: MouseEvent): void {
浏览 3提问于2020-01-06得票数 0
回答已采纳
1回答
我制作了一个数组的地图，用它的值来显示相应的图像。一切都很好，除了在这些字句之间出现了一些逗号。
我试图将数组转换为字符串并删除逗号，但由于一个我无法真正理解的原因，映射停止了。
现在映射如下：
const images = imgArr.map(n => `<p><img src="img/test/${n}.png" style="width: 100px; min-width: 500px; image-rendering: crisp-edges;" /> </p>`)
var h = docu
浏览 1提问于2021-03-20得票数 4
回答已采纳
2回答
我有一个函数，可以用几行基本的JavaScript代码来模拟输入，但是它会附加文本，但是我希望在其他已经存在的文本/元素之前，在不改变html结构的情况下将文本放在元素的前面。
如何用最简单的javascript实现这一点？
JavaScript
var el = getElementById('one'), str = 'Abcdefg...'
function type(){
el.innerHTML += str.charAt(i); i++;
if(i < str.length){var t = setTimeout(type, 3
浏览 2提问于2014-03-07得票数 20
回答已采纳
当我单击表中的项目时，我需要它将该项目添加到列表中并显示该列表。
下面是我在列表中添加/显示项目的代码：
var myList = document.getElementById('my-list');
function addItemToList(id) {
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(id));
myList.appendChild(entry);
浏览 5提问于2016-12-17得票数 4
回答已采纳
我关注的JS代码是：
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(modalsArray);
document.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
if (e.target.classList.contains("item&#
浏览 1提问于2019-07-17得票数 0
回答已采纳
我正在进行一个角度项目，我正在使用一个外部组件库(NGPrime：)，它为我提供了一些内置组件，比如<p-button> (我使用的是代替普通的<button>)。
现在，我想在每次用户触发事件时创建一个新的<p-button>。我只是试着用
var button = document.createElement('p-button')
document.getElementById("button-list").appendChild(button)
和
document.getElementById("button
浏览 3提问于2020-03-05得票数 0
当尝试在不使用document.createElement()的情况下将一个值添加到一个已经存在的元素时，浏览器会显示所需的结果，但是，当我使用document.createElement()执行此操作时，我得到了[Object HTMLElement]，但在控制台中没有出现错误。 例如，以下代码按预期方式工作： const heading = document.querySelector('#heading');
const headingText = "<em>I am some random text</em>";
浏览 34提问于2019-06-11得票数 1
2回答
我试图优化我的加载CSSS文件，因为我是加载一些大的CSS文件的网页上，他们没有使用。是否只有在页面上有一个类的元素存在时，我才能对它们进行排队。
但是，我尝试过以下几种方法，但不起作用：
jQuery(document).ready(function($) {
//Script Checkers
var wowJS = $('.wow');
if (wowJS.length > 0) {
$.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js',
浏览 0提问于2019-04-10得票数 4
回答已采纳
我希望能够编写以下内容，而不必导入jQuery库，以便将div替换为在另一个html文件中编写的组件的内容：
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$.get("common/navbar.html", function(data) {
$("#navbar-placeholder").r
浏览 2提问于2021-03-24得票数 1
回答已采纳
1回答
当用户选择照片时，我在普通javascript中将div添加到父div中。我还添加了两个点击事件来打开预览和删除照片。当添加第一张照片时，这两个事件都可以正常工作，但是当我添加另一张照片时，最新的照片有点击事件，但以前的div(s)没有。
为什么会发生这种情况，更重要的是，我如何防止这种情况发生？
下面是所讨论的代码。
function addImageToView(imageURI){
var imageDiv = document.getElementById('imageMaster');
imageDi
浏览 6提问于2017-10-03得票数 0
回答已采纳
3回答
我在javascript函数中动态创建一个按钮元素，然后向该按钮添加一个onclick事件。但是在我按下这个按钮后，我得到了一个错误Uncaught ReferenceError: removeQuestionis not defined (removeQuestionis是我的函数名)
这是我在js函数中创建的按钮。
const addQuestions = () => {
const removeBtn = '<a color="primary" onClick={removeQuestion}> x</a>';
w
浏览 13提问于2022-07-14得票数 0
回答已采纳
1回答
有没有人知道是否有可能在JS对象中循环一个图像并显示它？到目前为止我有这个密码。在最后你可以看到
元素显示在页面上，但是我也希望遍历图像并在序列之后显示它。这个是可能的吗？
我尝试在设置超时函数之后创建一个函数，然后按照逻辑在事件侦听器中调用它，我认为这是合理的，但不，它不起作用。
食谱={咖啡：“煮沸一些水”、“煮咖啡渣”、“倒入杯中的咖啡”、“加糖和牛奶”、“lemonTea：”煮沸一些水“、”把水泡在茶里“、”在杯子里倒茶“、”在杯子里倒茶“、”加柠檬“、”在水里加一些巧克力粉“、”往杯子里倒巧克力“、”https://unsplash.com/photos/jn-HaGWe4yw
浏览 1提问于2019-08-01得票数 0
我有一个浏览器，我正在向其中添加内容，方法类似于：
browser.setText(browser.getText() + newText());
然后，当有太多的html超出视图的容量时，我希望浏览器向下滚动，所以每次调用setText()后，我也会这样做(正如web上其他地方对这个问题的回答所建议的那样)：
browser.execute("window.scrollTo(0, document.body.scrollHeight)");
然而，这并不起作用！我也尝试过使用锚点来滚动，但也不起作用。
如何才能做到这一点？相反，我的方法(似乎对其他人有效)的问题在哪里？
谢谢
浏览 0提问于2012-07-20得票数 1
回答已采纳
我试图向DOM中添加一个元素，但只想在元素不存在的情况下才添加它。由于我也将在ajax调用中使用该函数，因此它将重复其自身，因此我需要检查元素是否已经存在。
对于jQuery，这很简单：
if( jQuery(".class").length == 0){
jQuery("<div class='new_div'></div>").appendTo(".toolbar-sorter");
}
我怎么用香草JS做同样的检查？当前代码：
const element = document.querySelecto
浏览 5提问于2022-10-21得票数 -3
回答已采纳
1回答
我被卡住了。我正在尝试在标签中的文本后面添加一个额外的符号。我创建了一个指令，其中包含以下代码：
@Directive({
selector: '[myDirective]'
})
export class MyDirective{
constructor(private el: ElementRef) {
this.el.nativeElement.insertAdjacentHTML('beforeend', '<span style="color: red">*</span>'
浏览 17提问于2018-02-16得票数 0
回答已采纳
1回答
我正在考虑在我的项目中使用Handlbar模板。把手可以返回DOM对象吗?或者只能返回HTML。例如，如果我想将一个子元素附加到一个DIV中，我可以调用DIV.appendChild(myTemplate)；如下所示：
var parentDiv = document.getElementById("parentDiv");
for(var i = 0;i<myData.length;i++){
var source = $("#my-template").html();
var template = Handlebars.compil
浏览 3提问于2014-11-06得票数 1
回答已采纳
我正在编写一个使用handlebars.js的应用程序，但和其他许多在线资源一样使用JQuery。但是，我想简单地使用vanilla js编译和呈现一个handlebars模板。
这是HTML模板
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{b
浏览 0提问于2015-07-21得票数 0
我正在从事的项目之一是，我需要在文档库页面上显示站点名称，以便用户知道他/她正在工作的站点。
另外，我希望网站名称仅出现在文档库页面级别上。我相信，如果这是在母版页级别通过利用面包屑来完成的，那么它将反映导航中的任何地方，因此希望确保它只反映在文档库页面上。
对于如何做到这一点，有什么想法吗？我正在使用Office 365/SharePoint online。提前谢谢。
浏览 0提问于2018-03-30得票数 0
回答已采纳
我试图使用onclick中的函数将列表元素添加到现有的ul中，如下所示：
<span style="color:red;">Bob</span>
如果我在HTML中硬编码它，它可以很好地工作：
<ul id="LsUL">
<li><span style="color:blue;">Joe</span></li>
<li><span style="color:green;">Frank</span></li
浏览 1提问于2020-03-22得票数 0
如何保持对新创建元素(createElement())的引用，该元素是在DOM (insertAdjacentHTML())中的现有元素之后插入的。
在本例中，如果我在elNew/elNewInner之后使用insertAdjacentHTML()，则可以看到颜色没有变化
var elOrig = document.getElementById('insertAfter');
// Create new element
var elNew = document.createElement('div'),
elNewInner = document.cr
浏览 2提问于2016-04-16得票数 3
回答已采纳
我需要得到我的div之间的2 div在我的模板。我只能用外部HTML，JS编辑它。模板如下所示：
<main id="content-in">
<div id="homepage-banner"> XXX </div>
<div id="carousel-banner"> XXX </div>
我需要得到我的img和href <div id="moveOut"> XXX </div>之间的这2。
我现在就这样做了，还行：
<s
浏览 6提问于2022-01-21得票数 1
回答已采纳
我使用这段代码插入<bgsound>标记。
EmbeddedWB.Doc2.body.insertAdjacentHTML('afterBegin','<bgsound src="chimes.wav">');
忽略一下<bgsound>已经过时了。我正在使用它，因为在IE6中它可以工作。
但是，在上面的操作之后，HTML源文件中没有任何内容。起初，我认为上面的代码有问题，直到我尝试了这一点：
EmbeddedWB.Doc2.body.insertAdjacentHTML('afterBegin'
浏览 7提问于2014-03-07得票数 1
回答已采纳
在预订表单中，我试图显示可用的rooms及其room_category，如果它们在特定的时间跨度内可用的话。当创建一个新的预订时，一切都很好。
问题
当我想编辑预订表单(更确切地说是时间跨度)时，表单下拉列表将清空并再次生成。问题是，以前选择的room及其room_category在可用时没有显示为selected。
问题
如何：
如果新选择的datesalternatively，可用，则room_category 将选择以前选择的room，如果room不可用，如何从先前选择的room中自动选择room
码
预约表格
<div class="col col-sm-4"&g
浏览 1提问于2020-01-06得票数 0
回答已采纳
我正在为我的新兵训练营建立一个项目，我被困在一个非常恼人的小区域。我有一个api，可以向amazon查询并显示产品，每个产品都有自己的“卡片”样式，同时，如果用户选择要将该产品添加到他的“配置文件”中，则将每个产品推送到用户类构造函数中的一个空数组中，在用户类中，我有一个函数"displayProducts“，它基本上遍历该产品数组，创建一个div元素，在每次迭代中修改元素的innerHTML并显示在页面上。这是一项功能：
const productSection = document.getElementById('userProducts')
浏览 2提问于2020-10-29得票数 1
我已经搜索过，但我只找到了.join()的解决方案
const createCard = () => {
const pokemonTypes = ['grass', 'fire', 'water'];
return (
`<div>
${pokemonTypes.map(type => `<div>${type}</div>`)}
</div>`
)
}
document.body.insertAdj
浏览 6提问于2022-01-20得票数 0
回答已采纳
insertAdjacentHTML需要两个参数：
职位("beforebegin"，"afterbegin"，"beforeend"，"afterend")
html (将从文本转换为DOM)
我可以传递DOM元素作为第二个参数吗？
浏览 6提问于2014-06-28得票数 19
回答已采纳
下面是创建新行文本字段的代码，例如，如果该行指定了4个文本字段，下面的代码将创建与我单击Add按钮时相同的附加行。
以下代码仅在IE中工作，在任何其他浏览器中都不工作：
var delName = "ID=oth4del";
var t = oth4;
t.str = "\r\n <td><table class=\"query\" width=\"100%\">\r\n <tr>\r\n <td><input type=\"t
浏览 3提问于2013-04-30得票数 1
回答已采纳
所以我正在使用电子，在我的文件"ipcRendererEvent.js“中，我写了以下代码： function loadImages (images) {
const imagesList = document.querySelectorAll('ul.list-group')
for (let i = 0, length1 = images.length; i < length1; i++) {
const node = `<li class="list-group-item">
浏览 45提问于2019-01-22得票数 7
1回答
我使用的是一个API，我完全不知道如何用3个不同对象的数据输出3个div。发生的事情是JS只输出一个div。我想知道如何防止JS覆盖？ function reviews(id){
fetch(`https://api.themoviedb.org/3/movie/${id}/reviews?api_key=9250b9e19854d9deaa571f4074bc38a3&language=en-US&page=1` ,{
method: "GET",
})
.then(response => {
浏览 12提问于2020-06-27得票数 3
回答已采纳
我在VisualStudio2017上制作windows存储应用程序，我注意到默认情况下没有new Promise()，只有WinJS.Promise，这在某些方面与标准承诺不同(例如它没有.catch，而不是Promise.all，它有Promise.join等等)。
我想知道是否有一种简单的方法可以将WinJS承诺转换为正常的承诺。
浏览 2提问于2017-10-30得票数 1
回答已采纳
我必须将内容动态地添加到由我的CMS在论坛模块中生成的iFrame中。我无法控制HTML。我正在动态地添加内容，并试图找到最佳解决方案。
下面是我使用的代码：
<iframe id="re_contentIframe">
<html>
<body>
<p>Forum content is typed here.</p>
<p>More forum content.</p>
Forum Signature
</body>
</html>
&
浏览 2提问于2013-11-23得票数 0
回答已采纳
我想显示我的document.write("something important");
转换为具有特定id的特定div。
我是我的HTML，我有一个div <div class="col-lg-4" id="print"> ... </div>
在我的JavaScript中，我有一个循环。
for(var i = 0; i < L; i++) {
document.write(
navigator.plugins[i].name +
" | " +
navigator
浏览 1提问于2015-03-18得票数 3
回答已采纳
嗨，这看起来很简单，但不起作用！我试图取两个Epoch数，并在一个循环中计算一周中的那一天。我需要这样做，因为我不想计算周末的日子(即0或6)。
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display todays day of the week.</p>
<button onclick="myFunction()">Try it</button>
<p id="
浏览 1提问于2015-03-09得票数 1
回答已采纳
我需要使用纯javaScript将一些html添加到现有元素中：
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var target = document.que
浏览 1提问于2017-02-28得票数 19
回答已采纳
1回答
这是我在dom中创建Note的函数，问题是为了创建note，我添加了类动画“淡入”，当这个函数运行时，它为所有的note dom做动画，而不仅仅是为一个创建的。我如何解决只有一个创建者才会做动画的问题？
function createNote(note){
const noteContainer = document.querySelector("#note-display");
let noteEl = `<div id="${note.id}" class="note fade-in">
浏览 6提问于2020-12-28得票数 0
有人能帮我做这件事吗?我想在一篇文章中插入div，在特定的<p>点之后显示一个广告。
我让它在某种程度上使用jquery，但如果可能的话，我希望使用纯javascript的方式。
这是我目前所拥有的
$(document).ready(function(){
$('<div class="ad-reporter-ahytrfg35423">Advertisement<div id="inreedvidSlot"></div><div>').insertAfter('#
浏览 0提问于2019-03-11得票数 0
我正在做的是使用纯javascript生成一个post导航。但它表明beforeClosingTag不是一个函数。
在下面的工具函数中，它应该是一个函数，因为我将beforeClosingTag编码为一个函数。在片段中，它可以生成ul列表，但是如果您通过web检查器查看，仍然可以找到：
**Uncaught TypeError: greatApp.tools.insertHTMLString.beforeClosingTag is not a function**
除此之外，在我的本地环境中，相同的代码--但它甚至不能显示ul列表--我不知道为什么。谢谢
//global tools fu
浏览 0提问于2016-01-06得票数 0
回答已采纳
我在一个模式中加载一个HTML页面
当我将代码排除在模型之外时，事件就会正常工作(单击、输入和其他)
注意:我不使用，也不想使用JQuery (从不)
演示：
我已经试着让它工作了三天。看起来一切都很好但是..。
帮帮我
const codeHTML = () => {
const code = `
<div id="page">
<div class="steps">
<article class="step1">
浏览 3提问于2021-02-14得票数 0
回答已采纳
我有一个向页面添加文本的脚本，如下所示：
document.body.innerHTML += '<input type="image" id="alertMeID" style="position:fixed;top:0;left:0" //src="http://i55.tinypic.com/2nly5wz.gif" ///>';
document.body.innerHTML += '<input type="image" id="alertMeID2
浏览 0提问于2012-01-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
