Element.insertAdjacentHTML() API 在 chrome 55.0.2883.87 中引发错误
Posted
技术标签:
【中文标题】Element.insertAdjacentHTML() API 在 chrome 55.0.2883.87 中引发错误【英文标题】:Element.insertAdjacentHTML() API throws error in chrome 55.0.2883.87 【发布时间】:2017-07-26 12:00:46 【问题描述】:我找到了关于 API here 的解释,它告诉我第二个参数是一个字符串。
在firefox中运行正常。但是,在 chrome 中,它显示以下错误:
我只是好奇这是什么原因造成的?是不是因为这个api还停留在Working Draft状态,不同的浏览器实现的不同?
以下是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<script>
//normal
// var pTag=document.createElement("p");
// div.insertAdjacentElement("beforeend",pTag);
//throw error:
// Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'.
var txt = "<p>testtest</p>";
div.insertAdjacentElement("beforeend",txt);
</script>
</body>
</html>
【问题讨论】:
您正在阅读insertAdjacentHTML
的文档,但您使用的是insertAdjacentElement
@RolandStarke 对不起,这是我的粗心,谢谢~
呃......只是做了同样的事情。阅读错误的文档...多年后另一个人在做同样的事情...好吧...正确的文档是 insertAdjacentElement 因为那是我实际尝试使用的功能。
【参考方案1】:
只需将div.insertAdjacentElement
更改为div.insertAdjacentHTML
:
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding revoltion</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parent">
<ul class="ul"></ul>
</div>
<script src="dom.js"></script>
</body>
</html>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<script>
//normal
// var pTag=document.createElement("p");
// div.insertAdjacentElement("beforeend",pTag);
//throw error:
// Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'.
var txt = "<p>testtest</p>";
div.insertAdjacentHTML("beforeend",txt);
</script>
</body>
</html>
【讨论】:
【参考方案2】:参数不正确。第二个参数应该是 html 元素,在你的情况下它是一个字符串。
【讨论】:
【参考方案3】:您的txt
变量必须是一个元素。你可以试试这个:
var txt = document.createElement("p")
txt.innerHTML = "testtest";
div.insertAdjacentElement("beforeend",txt);
【讨论】:
【参考方案4】:有两种方法可以插入新的元素块:
-
插入相邻元素(位置,元素)
第二个参数应该是一个元素而不是 html 文本。
例如。
var newDiv = document.createElement('div');
newDiv.style.backgroundColor = 'white';
parentElement.insertAdjacentElement('beforeend',newDiv);
-
插入AdjacentHTML(位置,文本)
text 是有效的 html 文本或 xml。
例如
var newDiv = `<div>This is a new div</div>
<p> Hello !! </p>`;
parentDiv.addAdjacentHTML('beforeend',newDiv);
【讨论】:
【参考方案5】:首先以编程方式创建一个新的 html 元素 var htmlObject = document.createElement('div'); 然后将您的字符串分配给新创建的对象 htmlObject.innerHTML=htmlString; .
var htmlString = `<div class="item clearfix" id="income-$obj.id">
<div class="item__description">$obj.descripiton</div>
<div class="right clearfix">
<div class="item__value">$obj.value</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>`
var htmlObject = document.createElement('div');
htmlObject.innerHTML=htmlString;
document.querySelector(".income__list").insertAdjacentElement('beforeend', htmlObject);
【讨论】:
【参考方案6】:如果您想继续使用 String HTML,您可以使用 Obj.innerHTML 或 Obj.insertAdjacentHTML()
const html = `
<li>enter code here
<div class="collapsible-header grey lighten-4">$ title </div>
<div class="collapsible-body white">$ content </div>enter code here
</li>
`;
PARENTELEMENT.insertAdjacentHTML('beforeend', html);
【讨论】:
以上是关于Element.insertAdjacentHTML() API 在 chrome 55.0.2883.87 中引发错误的主要内容,如果未能解决你的问题,请参考以下文章