获取属性，split和insertBefore作为没有jQuery / appendChild的HTML DOM

如何解决获取属性，split和insertBefore作为没有jQuery / appendChild的HTML DOM

例如，我有一些代码：

<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);