Question

insertAdjacentHTML需要2个参数：

职位（"beforebegin"，"afterbegin"，"beforeend"，"afterend"）
html（将从文本转换为DOM）

我可以将DOM元素作为第二个参数传递吗？

Answer 1

对于insertAdjacentHTML，文档明确指出第一个参数必须是字符串类型

element.insertAdjacentHTML(position, text);

position是相对于元素的位置，必须是其中之一   以下 字符串 ：
  “beforebegin”，“afterbegin”，“beforeend”，“afterend”

第二个参数的含义不是很清楚，但测试显示toString()是在第二个参数内部执行的，所以答案是

是，在大多数情况下，您可以将DOM元素作为第二个参数传递，但真正的答案是否，它不会附加到页面，相反，你只需要字符串

[object HTMLDivElement]

因为DOM元素被转换为字符串，这意味着该函数总是希望第二个参数是HTML的有效 字符串 ，而不是DOM元素。

这是一个快速测试

var d1 = document.getElementById('one'); 

var d3 = document.createElement('div');
d3.innerHTML = 'three';

d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

d1.insertAdjacentHTML('afterend', d3);

<div id="one">one</div>

还有其他可用的方法更适合实际的DOM元素，例如appendChild，insertBefore等。

使用哪一个取决于要插入元素的位置等，但插入与insertAdjacentHTML中可用的四个选项相同的位置是可能的，并且通常不是很难做到。

还有Element.insertAdjacentElement()与insertAdjacentHTML完全相同，但接受DOM节点而不是HTML字符串。

Answer 2

虽然您无法直接传递DOM元素，但可以将insertAdjacentHTML 传递给Feed const parent = document.querySelector('.parent'); const child = document.createElement('p'); child.innerHTML = 'Awesome!'; parent.insertAdjacentHTML('beforeend', child.outerHTML); // <div class="parent"> // <p>Awesome!</p> // </div>的第二个参数使用它的HTML字符串表示。

示例：

    #include <iostream>

class Account{
    public:
    Account(double initial_balance)
    {
        if(initial_balance >= 0)
            acct_balance = initial_balance;
        else
            std::cout << "Invalid Balance!" << std::endl;
    }
    void credit(double x)
    {
        acct_balance += x;
    }
    void debit(double x)
    {   
        if(x <= acct_balance){
            acct_balance -= x;
            flagWidraw = true;
        }
        else
            std::cout << "Debit amount exceeded account balance." << std::endl; 
    }
    double getBalance()
    {
        return acct_balance;
    }
    public:
    double acct_balance;
    bool flagWidraw = false;
};

class SavingsAccount:public Account{
    public:
        double interest_rate;
        SavingsAccount(double balance, double interest):Account(balance)
        {
            interest_rate = interest;
        }
    double calculateInterest (){
        return (acct_balance * (interest_rate/100));
    }
};

class CheckingAccount:public Account{
    public:
        double charged_fee;
        CheckingAccount(double balance, double fee):Account(balance)
        {
            charged_fee = fee;
        }
    void credit()
    {
        acct_balance -= charged_fee;
        std::cout << "Checking Account Credit deduction fee "<< Account::acct_balance << std::endl;
    }
    void debit()
    {
        if(flagWidraw == true)
            acct_balance -= charged_fee;

        std::cout << "Checking Account Debit deduction fee "<< acct_balance << std::endl;
    }
};


int main()
{
    Account a(500.00);
    SavingsAccount sa(a.getBalance(),12); //fixed interest rate 12
    double interest = sa.calculateInterest();
    std::cout << "Interest amount is added to your credit: " << interest << std::endl;
    a.credit(interest);

    CheckingAccount ca(a.getBalance(), 30);
    ca.credit();

    std::cout << "Balance is: " << a.getBalance() << std::endl;

    return 0;
}

Answer 3

.insertAdjacentHTML()只接受将被解析为HTML并插入的字符串（如innerHTML）

要插入DOM元素，您可以使用.insertAdjacentElement()

MDN：https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement

我可以使用insertAdjacentHTML插入DOM元素吗？

3 个答案: