javascript將元素添加到div

Question

我使用動態詞創建此循環動畫，但我需要將所有跨度附加到div <div id"wordcloud"></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>

Answer 1

您的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>

Answer 2

我認爲這將有助於

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

這樣做代替document.body.appendChild（）

Answer 3

您必須將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>