Element.insertAdjacentHTML() API throws error in chrome 55.0.2883.87

Your txt variable must be an element. You can try this : 

var txt = document.createElement("p")

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

The parameters are incorrect. The second parameter should be html element, in your case it's a string.


Just Change div.insertAdjacentElement to 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>

Tags:

Javascript

Dom

Google Chrome

Recent Posts