网页的结构是这样的：-
<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 属性来做到这一点。我正在考虑解析内容和更新的幼稚方式。
如果我不清楚我的疑问，请发表评论！
创建所需的元素，为其提供所需的属性、子元素、innerHTML 等，然后附加它：
var parent = document.getElementById('abc'),
ele = document.createElement('div');
ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";
parent.appendChild(ele);
你可以偷懒，只设置innerHTMLof #abc，但我认为这种方法更灵活。
我想这就是你要找的http://jsfiddle.net/cExRS/
代码就是这个
element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;
你真的应该试试jquery，它让事情变得容易多了
Liked 指出有前置的答案，在 JS 中插入同级节点 以及如何使用常规 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>