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

你可能很懒，只需设置innerHTML的{{1}}，但在我看来，这种方法更灵活。

Answer 2

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

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

你应该尝试jquery，它会让事情变得容易

Answer 3

Liked指出有预先补充的答案，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>

Answer 4

这个问题是重复的：s

How can I implement prepend and append with regular JavaScript?

它被称为前置

修改网页的DOM

4 个答案: