问题描述
<div id='varian'>
<a title='A,B,C,D'></a>
<a title='1,2,3,4'></a>
<a title='1,E,Z2'></a>
</div>
<script>
var varianproduka = document.querySelectorAll('#varian a');
varianproduka.forEach(function(e) {
var aa = e.getAttribute("title"),ba = aa.split(",");
for (var ca in ba) {
var da = ba[ca],ea = "<div>" + da + "</div>";
e.insertBefore(ea,e.childNodes[0]);
}
});
</script>
我想要这样:
<div id='varian'>
<a title='A,D'>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</a>
<a title='1,4'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</a>
<a title='1,Z2'>
<div>1,2</div>
<div>E,3</div>
<div>C</div>
<div>Z2</div>
</a>
</div>
但是我得到的只是一条错误消息:
“未捕获的TypeError:无法在'Node'上执行'insertBefore':参数1的类型不是'Node'。”
代码是否有问题?否则,如果我们不使用jQuery或appendChild,那么我们真的无法做到这一点。我不使用jQuery和附加的原因是它们在iOS上不起作用。
解决方法
"<div>" + da + "</div>"
是一个字符串。您需要一个Node
。
话虽如此,我不确定您为什么使用insertBefore()
,因为您只是按顺序附加了新元素。我建议使用append()
来代替,它一次可以接受多个元素。
// just a simple tag creator utility
const createTag = (tagName,textContent,props) =>
Object.assign(document.createElement(tagName),{ textContent },props)
document.querySelectorAll('#varian a[title]').forEach(tag => {
tag.append(...tag.title.split(",").map(str => createTag('div',str)))
})
a { display: block; margin: .5rem 0; padding: .5rem; border: 1px solid }
<div id='varian'>
<a title='A,B,C,D'></a>
<a title='1,2,3,4'></a>
<a title='1,E,Z2'></a>
</div>
根据append()
的{{3}}和Browser compatibility list,在Safari iOS(版本10)上应该没有问题。
您可以使用insertAdjacentHTML将字符串形式的节点插入到元素中。 在您的代码中进行更改
e.insertBefore(ea,e.childNodes[0]);
使用
e.insertAdjacentHTML('beforebegin',ea);