Question

我有一个ID为comment-box-5的div，我希望看到使用javascript，如果有内部的表单，如果没有添加它（因此当我调用该函数时切换）。我写了这段代码试图这样做：

function reply(id){
    console.log(document.getElementById('comment-id-' + id).innerHTML.indexOf(document.getElementById('form-' + id)));
    if (document.getElementById('comment-id-' + id).innerHTML.indexOf(document.getElementById('form-' + id))) {
        var form = replyFn(id);
        document.getElementById('comment-id-' + id).appendChild(form);
    } else {
        //for toogle effect
        document.getElementById('comment-id-' + id).removeChild(document.getElementById("form-" + id));
    }
}

我尝试执行它，但console.log(document.getElementById('comment-id-' + id).innerHTML.indexOf(document.getElementById('form-' + id)));打印-1，即使里面有一个表单。

我做错了什么？我怎样才能真正看出div中是否有表格？

Answer 1

您可以将条件更改为：

if ( document.querySelector('#comment-id-' + id +'>#form-' + id) ) {
    //Your if logic
}else{
    //Your else logic
}

代码段

＆＃13;

var id = 1;

if (document.querySelector('#comment-id-' + id + '>#form-' + id)) {
  console.log('Remove form');
} else {
  console.log('Add form');
}

＆＃13;

<div id="comment-id-1">
  <form id="form-1"></form>
</div>

＆＃13;

Answer 2

尝试在不使用innerHTML的div上使用包含，如下所示，我稍微更改了您的代码以执行示例，但它也适用于您的。

 console.log(document.getElementById('comment-id-1').contains(document.getElementById('form-id-1')));

<div id="comment-id-1"><form id="form-id-1"></form></div>

查看div中是否有表单

2 个答案: