时间戳

首页 > 解决方案 > 获取属性、拆分和 insertBefore 作为没有 jQuery/appendChild 的 HTML DOM

javascript - 获取属性、拆分和 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,2, E,3, C, 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, B, C, D'>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
 </a>
 <a title='1, 2, 3, 4'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
 </a>
 <a title='1,2, E,3, C, 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 和 append 的原因是它们不适用于 iOS。

标签： javascripthtmlforeach

解决方案

"<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,2, E,3, C, Z2'></a>
</div>

根据浏览器兼容性列表和Can I use... for append()，您在 Safari iOS（从版本 10 开始）上应该没有问题。

推荐阅读