Element.insertAdjacentHTML()API在chrome 55.0.2883.87中引发错误

Pag*_*eYe 2 javascript dom google-chrome

我在这里找到了关于API的解释,它告诉我第二个参数是一个字符串.

它在firefox中正常运行.但是,在chrome中,它显示以下错误:

关于chrome中的<code> Element.insertAdjacentHTML()API </ code>的错误

我只是好奇这是什么原因造成的?是因为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>
Run Code Online (Sandbox Code Playgroud)

Roh*_*dey 11

只需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>
Run Code Online (Sandbox Code Playgroud)


Sha*_*our 5

参数不正确。第二个参数应该是 html 元素,在你的情况下它是一个字符串。