18-解决克隆input复选框节点(type=“checkbox“)文字不显示问题

bug介绍

在使用input的复选框类型时，克隆该节点，即是是深拷贝的情况下，文字也无法被克隆

 

 

bug分析 

出现此bug的情况主要有一种:

1.input复选框与文字的关系是并列关系，克隆了input节点，但是并没有克隆后面的text文本。

bug解决 

针对第一种情况:

找到input标签 ---> 在其外部再加一层标签(以label标签为例) ---> 深度克隆label标签即可获取input后面的文字

如果想要修改这个文字的话:

在input复选框后的text文字外层再加一层标签(以span标签为例) ---> 通过js获取label标签节点,取其lastchildren节点,使用innerText修改文字

<div class="box">
    <input type="button" onclick="addBtn()" value="添加">
    <input type="button" onclick="selectAll()" value="全选">
    <input type="button" onclick="unSelectAll()" value="取消全选">
    <input type="button" onclick="reverse()" value="反选">

    <hr>
    <label class="ch-box"><input  type="checkbox"><span>语文</span></label>  
    <br>
    <label class="ch-box"><input  type="checkbox"><span>数学</span></label>  
    <br>
    <label class="ch-box"><input  type="checkbox"><span>英语</span></label>  
    <br>        
</div>

var chbox = document.getElementsByClassName('ch-box')[0];
var clonenode = chbox.cloneNode(true);
            
clonenode.lastChild.innerText = '化学';
var div = document.getElementsByClassName('box')[0];
div.appendChild(clonenode);        
var newBr = document.createElement('br');
div.appendChild(newBr);

上述运行结果:

 

bug解决,成功获取到input复选框后面的文字。