logo标签列表

在Chrome 55.0.2883.87版本中，Element.insertAdjacentHTML()接口会抛出错误。

javascriptgoogle-chromedom
21

我在这里找到了有关API的说明（链接），它告诉我第二个参数是字符串。

在Firefox中它表现正常。但在Chrome中，它显示以下错误:

chrome中有关Element.insertAdjacentHTML() API的错误

我只是好奇是什么导致了这个问题？是因为该API仍处于草案状态，不同的浏览器实现不同吗？

以下是我的代码：

<!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>
30
您正在阅读insertAdjacentHTML的文档，但您使用了insertAdjacentElement。请注意两者是不同的方法，insertAdjacentHTML用于将HTML字符串插入到元素中，而insertAdjacentElement用于将一个元素插入到指定位置。 - Roland Starke
@RolandStarke 抱歉，这是我的疏忽，谢谢~ - Ye Shiqing
唉...我刚刚也犯了同样的错误。看错了文档...多年后另一个人也犯了完全相同的错误...好吧...正确的文档应该是insertAdjacentElement，因为那才是我真正想要使用的函数。 - Code Novice
我无法相信，我也犯了同样的错误。 - criccode
7个回答
53

将 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>
5
参数不正确。第二个参数应该是 HTML 元素，而在您的情况下它是一个字符串。
3

你的txt变量必须是一个元素。你可以尝试这样做：

var txt = document.createElement("p")

txt.innerHTML = "testtest";
div.insertAdjacentElement("beforeend",txt);
2

我已经将 div.insertAdjacentElement 更改为 div.insertAdjacentHTML：

这样对我来说会起作用。

0

插入新元素有两种方法：

  1. insertAdjacentElement(position, element) 第二个参数应该是一个元素而不是 HTML 文本。 例如：

var newDiv = document.createElement('div');
newDiv.style.backgroundColor = 'white';
parentElement.insertAdjacentElement('beforeend',newDiv);

  1. insertAdjacentHTML(position, text) text 是有效的 HTML 文本或 XML。 例如：

var newDiv = `<div>This is a new div</div>
                <p> Hello !! </p>`;
parentDiv.addAdjacentHTML('beforeend',newDiv);

0

如果你想继续使用字符串 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);
0
首先，通过编程方式创建一个新的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);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接