javascript - 修改网页的DOM

Question

网页的结构是这样的:-

<div id='abc'>
  <div class='a'>Some contents here </div>
  <div class='b'>Some other contents< </div>
</div>

我的目标是在上面结构中的类 a 之后添加它。

<div class='a'>Some other contents here </div>

最终的结构如下所示:-

  <div id='abc'>
      <div class='a'>Some contents here </div>
      <div class='a'>Some other contents here </div>
      <div class='b'>Some other contents< </div>
    </div>

是否有更好的方法使用 DOM 属性来做到这一点。我正在考虑解析内容和更新的简单方法。

如果我的疑问不清楚，请评论!

Answer 1

创建所需的元素，为其提供所需的属性、子元素、innerHTML 等，然后附加它:

var parent = document.getElementById('abc'),
    ele = document.createElement('div');

ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";

parent.appendChild(ele);​

Fiddle

你可以偷懒，直接设置#abc的innerHTML即可，但我认为这种方法更灵活。