修改网页的DOM答案

【问题标题】：Modifying DOM of a webpage修改网页的DOM
【发布时间】：2012-11-24 02:28:58
【问题描述】：

网页的结构是这样的：-

<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 属性来做到这一点。我正在考虑解析内容和更新的幼稚方式。

如果我的疑问不清楚，请发表评论！

【问题讨论】：

唯一好的答案：使用 jquery
到目前为止您尝试过什么？您是否研究过如何向 DOM 添加元素？
@trebuchet：这太愚蠢了。
我试图使用 getELementById 获取 abc div 的内容。然后我正在解析内容以在正确的位置添加值
是的，DOM 不是字符串。它是节点的树形结构。通过 id 获取父元素后，您需要创建一个新元素并将其相对于其中一个子元素插入。

标签： javascript dom

【解决方案1】：

这个问题是重复的：s

How can I implement prepend and append with regular JavaScript?

这叫做前置

【讨论】：

为什么投反对票？答案就在那里。只是想在这里帮忙
这最好作为评论

【解决方案2】：

创建所需的元素，为其赋予所需的属性、子元素、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，但我认为这种方法更灵活。

【讨论】：

【解决方案3】：

我想这就是你要找的http://jsfiddle.net/cExRS/
代码就是这个

element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;

你真的应该试试 jquery，它让事情变得更容易

【讨论】：

【解决方案4】：

喜欢指出前面有答案，Insert sibling node in JS 和How can I implement prepend and append with regular JavaScript?

<html>
<head>
<script type="text/javascript">
function add(myClass) {
    var root = document.getElementById('abc');
    var last = null;
    for (var i = 0; i < root.childNodes.length; i++) {
        var child = root.childNodes[i];
        if (!child.className) continue;        
        var pat = new RegExp(myClass,'g');    
        var m = pat.exec(child.className);      
        if (!m) {
          if (!last) continue;
            var div = document.createElement('div');
            div.appendChild(document.createTextNode('After A content'));    
            root.insertBefore(div, last.nextSibling);        
            break;            
        }
        last = child;                     
    }
}
</script>
</head>
<body>
<div id='abc'>
  <div class='d'>Some contents here </div>
  <div class='b'>Some other contents </div>
  <div class='a'>Content A</div>
  <div class='a'>Content A1</div>
  <div class='a'>Content A2</div>
  <div class='a'>Content A3</div>
  <div class='b'>Some other contents </div>
</div>
<a href="#" onclick="add('a')">Add div</a>
</body>
</html>

【讨论】：