`.replaceChild（）`on`his`投掷NotFoundError：DOM异常8

Question

我想我会在jQuery事件中使用vanilla JavaScript。我的想法是，点击一个标题，我想向上滑动div（可以工作）并将点击的标签替换为更大的标题。

从我读过的内容来看，这可能是parentNode引用一个不是实际父元素的元素引起的，但在检查之后它似乎是在选择直接位于它上面的元素。

所以...这是代码！

HTML（在Jade中）

.policy-container
  h6.policy-heading Policies
  .policy-list
    .content-we-are-hiding
    .not-actually-important

的jQuery

$('.policy-heading').click(function() {
    var self = this;

    if (this.classList.contains('closed')) {
        $(this).next().slideDown(300);

        this.parentNode.replaceChild(self, '<h6 class="policy-heading">Policies</h6>');

    } else {
        $(this).next().slideUp(300);

        this.parentNode.replaceChild(self, '<h2 class="policy-heading closed">Policies</h2>');
    }
});

一切看起来都很标准。幸运的是我可以用jQuery来处理这个问题，但是我宁愿在这里使用vanilla JS。任何想法为什么这不起作用？

Answer 1

正如已经指出的那样，replaceChild需要两个节点。

以下内容适用于jQuery中包含的本机JS，如您所指定：

$('.policy-heading').click(function () {
    var self = this,
        h2 = document.createElement('h2'),
        h6 = document.createElement('h6');

    h2.class = "policy-heading closed";
    h2.innerHTML = "Policies";

    h6.class = "policy-heading";
    h6.innerHTML = "Policies";

    if (this.classList.contains('closed')) {
        $(this).next().slideDown(300);
        this.parentNode.replaceChild(h6, self);
    } else {
        $(this).next().slideUp(300);
        this.parentNode.replaceChild(h2, self);
    }
});

Answer 2

replaceChild有两个节点，你给它一个节点和一个字符串。

看起来你只需坚持使用jQuery并使用切换函数进行滑动和类更改就会好得多。

Answer 3

试试这个：

.click(function(this)

你还需要一些调试来了解我会建议你使用的内容：

console.log(this)

使用它：

el = document.createElement('h6');
el.class = "policy-heading";
el.innerHTML = "Policies";

this.parentNode.replaceChild(self, el);

Answer 4

正如大家所指出的，.replaceChild接受两个DOM元素，而不是像我正在使用的字符串。我也有倒退的论点，第一个是新元素，第二个是被替换的元素。

有效的示例代码

$('.policy-container').on('click', '.policy-heading', function() {

    var self = this,
            newElement;

    if (this.classList.contains('closed')) {

        newElement = document.createElement( 'h6' );
        newElement.classList.add('policy-heading');
        newElement.innerHTML = 'Policies';

    } else {

        newElement = document.createElement( 'h2' );
        newElement.classList.add('policy-heading');
        newElement.classList.add('closed');
        newElement.innerHTML = 'Policies';

    }

    $(this).next().slideDown(300, function() {
        self.parentNode.replaceChild( newElement, self );
    });

});