Javascript Element.insertAdjacentHTML（）API在chrome 55.0.2883.87中抛出错误_Javascript_Google Chrome_Dom

Javascript Element.insertAdjacentHTML（）API在chrome 55.0.2883.87中抛出错误

javascript google-chrome dom

Javascript Element.insertAdjacentHTML（）API在chrome 55.0.2883.87中抛出错误,javascript,google-chrome,dom,Javascript,Google Chrome,Dom,我找到了关于API的解释，它告诉我第二个参数是字符串在firefox中，这是正常的。但是，在chrome中，它显示以下错误：我只是好奇这是怎么回事？是因为api仍然处于工作草稿状态，不同的浏览器执行不同的实现吗以下是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &

我找到了关于API的解释，它告诉我第二个参数是字符串

在firefox中，这是正常的。但是，在chrome中，它显示以下错误：

我只是好奇这是怎么回事？是因为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>


文件

xxx
xxx
xxx
xxx
xxx

//正常的
//var pTag=document.createElement（“p”）；
//第二部分插入相邻元素（“之前”，pTag）；
//抛出错误：
//未捕获的TypeError:未能对“元素”执行“InsertAdjaceEntelement”：参数2不是“元素”类型。
var txt=“testtest”；
div.insertAdjacentElement（“beforeed”，txt）；

参数不正确。第二个参数应该是html元素，在您的例子中，它是一个字符串。

您的

txt

变量必须是一个元素。您可以尝试以下方法：

var txt = document.createElement("p")

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

只需将

div.insertadjacentellement

更改为

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>


文件

xxx
xxx
xxx
xxx
xxx

//正常的
//var pTag=document.createElement（“p”）；
//第二部分插入相邻元素（“之前”，pTag）；
//抛出错误：
//未捕获的TypeError:未能对“元素”执行“InsertAdjaceEntelement”：参数2不是“元素”类型。
var txt=“testtest”；
div.insertAdjacentHTML（“beforeed”，txt）；

有两种方法可以插入新的元素块：

插入相邻图元（位置，图元）第二个参数应该是元素，而不是html文本。例如

var newDiv=document.createElement（'div'）；
newDiv.style.backgroundColor='白色'；
parentElement.insertAdjacentElement（'beforeend'，newDiv）首先以编程方式创建一个新的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);

var htmlString=`
${obj.descripiton}
${obj.value}
`
var htmlObject=document.createElement（'div'）；
htmlObject.innerHTML=htmlString；
document.querySelector（“.income_ulist”）.insertAdjacentElement（'beforeed'，htmlObject）；
如果要继续使用字符串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);

const html=`
在这里输入代码
${title}
${content}在此处输入代码

`;
insertAdjacentHTML（'beforeend'，html）；
您正在阅读insertAdjacentHTML
的文档，但您使用的是insertAdjacentElement
@RolandStarke抱歉，这是我的疏忽，谢谢。。。只是做了同样的事情。阅读错误的文档。。。几年后，另一个人做着同样的事情。。。好啊正确的文档是insertAdjacentElement，因为这是我实际尝试使用的函数。