CODEWITHSUNDEEP
javascriptgoogle-chromedom
Ye Shiqing
Ye Shiqing

Reputation: 1669

Element.insertAdjacentHTML() API throws error in chrome 55.0.2883.87

I found the explaination about the API here, which tells me the second parameter is a string.

It's perform normal in firefox. However, in chrome, it shows the errors below:

errors about <code>Element.insertAdjacentHTML() API</code> in chrome

I just curious about what makes this? Is it because the api is still stay Working Draft status and different browsers do the different implementation?

The following is my code:

<!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>

Upvotes: 23

Views: 30969

Answers (7)

LOVENEET SINGH
LOVENEET SINGH

Reputation: 193

I have change div.insertAdjacentElement to div.insertAdjacentHTML:

and it will work for me

Upvotes: 2

tahir
tahir

Reputation: 1

You can use either Obj.innerHTML or Obj.insertAdjacentHTML() if you want to continue with String HTML

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);

Upvotes: 0

Rafiq
Rafiq

Reputation: 11515

first create a new html element programatically var htmlObject = document.createElement('div'); then assign your string to newly created object 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);

Upvotes: 0

kumarras
kumarras

Reputation: 146

There are two methods to insert new block of elements :

  1. insertAdjacentElement(position, element) The second parameter should be an element and not html text. E.g. 

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

  1. insertAdjacentHTML(position, text) text is valid html text or xml. e.g. 

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

Upvotes: 1

Rohit-Pandey
Rohit-Pandey

Reputation: 2159

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>

Upvotes: 56

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37403

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

var txt = document.createElement("p")

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

Upvotes: 3

Sharon Haim Pour
Sharon Haim Pour

Reputation: 6723

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

Upvotes: 5

Related Questions