javascript将元素添加到div

我使用动态词创建此循环动画，但我需要将所有跨度附加到div <div id"wordcloud"></div>。我无法按需要完成，因此我需要一些帮助。javascript将元素添加到div

var interval = 100; 
 
var width = 800; 
 
var height = 500; 
 

 
var words = [ 
 
    'Liberty', 
 
    'Morality', 
 
    'Modesty', 
 
    'Curiosity', 
 
    'Imagination', 
 
    'Excitement', 
 
    'Structure', 
 
    'Intellect', 
 
    'Friendliness', 
 
    'Conversation' 
 
]; 
 
var wordPlacementInterval = setInterval(function() { 
 
    var currentWord = words.shift(); 
 
    if (currentWord) { 
 

 

 
    var word = document.createElement('span'); 
 

 
    word.innerHTML = currentWord; 
 
    word.style.top = Math.floor((Math.random() * height) + 1) + 'px'; 
 
    word.style.left = Math.floor((Math.random() * width) + 1) + 'px'; 
 
    document.body.appendChild(word); 
 
    } else { 
 
    clearInterval(wordPlacementInterval); 
 
    } 
 
}, interval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wordcloud"></div>

来源

2017-07-03 user3699998

你想怎么办呢？你能解释一下吗？ – dloeda

@dloeda提到，目前尚不清楚预期结果应该如何。你能否在你的问题中增加一个预期输出的例子？ – shotor

而不是'document.body'使用'document.getElementById（'wordcloud'）'？ – evolutionxbox

您的ID属性中有一个丢失=<div id[HERE]"wordcloud"></div>

然后添加元素，你创造

document.querySelector('#wordcloud').appendChild(word);

像这样：

var interval = 100; 
 
var width = 800; 
 
var height = 500; 
 

 
var words = [ 
 
    'Liberty', 
 
    'Morality', 
 
    'Modesty', 
 
    'Curiosity', 
 
    'Imagination', 
 
    'Excitement', 
 
    'Structure', 
 
    'Intellect', 
 
    'Friendliness', 
 
    'Conversation' 
 
]; 
 
var wordPlacementInterval = setInterval(function() { 
 
    var currentWord = words.shift(); 
 
    if (currentWord) { 
 

 

 
    var word = document.createElement('span'); 
 

 
    word.innerHTML = currentWord; 
 
    word.style.top = Math.floor((Math.random() * height) + 1) + 'px'; 
 
    word.style.left = Math.floor((Math.random() * width) + 1) + 'px'; 
 
    document.querySelector('#wordcloud').appendChild(word); 
 
    } else { 
 
    clearInterval(wordPlacementInterval); 
 
    } 
 
}, interval);

<div id="wordcloud"></div>

如果你要使用你设置通过JavaScript你需要添加一些CSS象的位置：

var interval = 100; 
 
var width = 800; 
 
var height = 500; 
 

 
var words = [ 
 
    'Liberty', 
 
    'Morality', 
 
    'Modesty', 
 
    'Curiosity', 
 
    'Imagination', 
 
    'Excitement', 
 
    'Structure', 
 
    'Intellect', 
 
    'Friendliness', 
 
    'Conversation' 
 
]; 
 
var wordPlacementInterval = setInterval(function() { 
 
    var currentWord = words.shift(); 
 
    if (currentWord) { 
 

 

 
    var word = document.createElement('span'); 
 

 
    word.innerHTML = currentWord; 
 
    word.style.top = Math.floor((Math.random() * height) + 1) + 'px'; 
 
    word.style.left = Math.floor((Math.random() * width) + 1) + 'px'; 
 
    document.querySelector('#wordcloud').appendChild(word); 
 
    } else { 
 
    clearInterval(wordPlacementInterval); 
 
    } 
 
}, interval);

#wordcloud { 
 
    position: relative; 
 
} 
 

 
#wordcloud span { 
 
    position: absolute; 
 
}

<div id="wordcloud"></div>

来源

2017-07-03 11:47:18 caramba

-4

我认为这将有助于

$("#wordcloud").html(word)

这样做代替document.body.appendChild（）

来源

2017-07-03 11:47:26

每次迭代都会覆盖前一个。 –

是的，我认为这是关键，因为它是一个带有文字的动画 –

您必须将CSS positionrelative添加到span元素。

代码示例：

var interval = 100; 
 
var width = 200; 
 
var height = 150; 
 
var words = ['Liberty', 'Morality', 'Modesty', 'Curiosity', 'Imagination', 'Excitement', 'Structure', 'Intellect', 'Friendliness', 'Conversation']; 
 
var wordPlacementInterval = setInterval(function() { 
 
    var currentWord = words.shift(); 
 
    var word = document.createElement('span'); 
 
    var wordcloud = document.getElementById('wordcloud'); 
 
    
 
    if (!currentWord) { 
 
    clearInterval(wordPlacementInterval); 
 
    return; 
 
    } 
 

 
    word.innerText = currentWord; 
 
    word.style.top = Math.floor((Math.random() * height) + 1) + 'px'; 
 
    word.style.left = Math.floor((Math.random() * width) + 1) + 'px'; 
 
    wordcloud.appendChild(word); 
 
}, interval);

#wordcloud { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
span { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wordcloud"></div>

来源

2017-07-03 11:56:11

javascript将元素添加到div

回答

相关问题