代码之家 › 专栏 › 技术社区 › Zackton Jochem

将一个元素追加到另一个元素的子元素中

appendchild append javascript

0

Zackton Jochem · 技术社区 · 11 年前

我正试图将一个链接(“a”标记)附加到“topBar”元素的子元素。到目前为止,我得到的是:

document.getElementById('topBar').innerHTML += '<a href="http://orteil.dashnet.org/experiments/cookie/" target="blank">Cookie Clicker Classic</a>';

这将链接作为一个新的子元素放在“topBar”元素中,但我希望它放在“topBar”元素的现有子元素中。我该怎么做?child只是在div标记中,它没有id…我已经对.appendChild做了一些研究,但我没有找到任何相关的帮助,所以我在这里问。。。

如果有任何想法或解决方案发布,我将不胜感激。谢谢丹尼尔

编辑:topBar只有一个孩子,它是无名的

还有,我是不是做错了什么?

setTimeout(doSomething, 1000);
function doSomething() {
var element =  document.getElementById('particles');
if (typeof(element) != 'undefined' && element != null)
{
var newLink = document.createElement('a');
newLink.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/');
newLink.target = 'blank';
document.getElementById('topBar').appendChild(newLink);
var del = document.getElementById('links')
del.parentNode.removeChild(del);
return;
} else {
setTimeout(doSomething, 1000);
}
}

编辑:我完成了!感谢大家的帮助,尤其是Elias Van Ootegem。这是我使用的:

var link=document.createElement('a');
link.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/');
link.target = 'blank';
link.appendChild(
document.createTextNode('Cookie Clicker Classic')
);
var add = document.getElementsByTagName('div')[1]; //this picked the second div tag in the whole document
if(add.lastChild) add.insertBefore(link,add.lastChild); //appending it to the end of the child
else add.prependChild(link);

1 回复 | 直到 11 年前

1

Elias Van Ootegem 11 年前

首先,创建节点:

var newLink = document.createElement('a');
//set attributes
newLink.setAttribute('href', 'http://orteil.dashnet.org/experiments/cookie/');
newLink.target = 'blank';//preferred way is using setAttribute, though
//add inner text to link:
newLink.appendChild(
    document.createTextNode('Cookie Clicker Classic')//standard way, not innerHTML
);

然后,附加子项, using appendChild :

document.getElementById('topBar').appendChild(newLink);

或者,考虑到你的更新(你删除了一些其他元素), use replaceChild :

document.getElementById('topBar').replaceChild(
    newLink,//new
    document.getElementById('links')//old, will be removed
);

你就在那里!