获取属性、拆分和 insertBefore 作为没有 jQuery/appendChild 的 HTML DOM答案

【问题标题】：Get the attribute, split, and insertBefore as a HTML DOM without jQuery/appendChild获取属性、拆分和 insertBefore 作为没有 jQuery/appendChild 的 HTML DOM
【发布时间】：2020-08-13 06:39:20
【问题描述】：

例如我有一些代码：

<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。

【问题讨论】：

你确定这是你想要的结果。如果您的代码正常工作，则添加元素的顺序将与标题元素相反，因为这就是 insertBefore() 所做的
我还可以向你保证，有成千上万个使用 jQuery 的网站可以在 iOS 中完美运行。
@Phil 哦，我的意思是 jQuery .append() 在 iOS 中无法使用，所以我不会使用它。
是什么让你这么想？

标签： javascript html foreach

【解决方案1】：

"<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>

根据append() 的Browser compatibility list 和Can I use...，您在Safari iOS（从版本10 开始）上应该没有问题。

【讨论】：

【解决方案2】：

您可以使用 insertAdjacentHTML 以字符串形式将节点插入元素。在您的代码中更改

e.insertBefore(ea, e.childNodes[0]);

与

e.insertAdjacentHTML('beforebegin',ea);

【讨论】：