JavaScript Elemente an ein div anhängen

Ich baue diese Schleifenanimation mit dynamischen Wörtern, aber ich muss den ganzen Bereich in das div <div id"wordcloud"></div> anhängen. Ich kann es nicht so machen, wie ich es will, deshalb brauche ich hier ein bisschen Hilfe.JavaScript Elemente an ein div anhängen

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>

Quelle

2017-07-03 user3699998

Wie wollen Sie es tun? Könntest du erklären? – dloeda

Wie @dloeda erwähnt, ist unklar, was das erwartete Ergebnis sein sollte. Könnten Sie Ihrer Frage ein Beispiel für die erwartete Ausgabe hinzufügen? – shotor

Anstatt 'document.body' verwenden' document.getElementById ('wordcloud') '? – evolutionxbox

Sie hatte eine fehlende = in der ID-Eigenschaft <div id[HERE]"wordcloud"></div>

und dann die Elemente fügen Sie erstellen zu

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

wie so:

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>

Wenn Sie versuchen, die Positionen zu verwenden, Sie über JavaScript Sie wie kleine CSS hinzufügen müssen setzen:

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>

Quelle

2017-07-03 11:47:18 caramba

-4

ich denke, das

helfen

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

Tun Sie dies anstelle der document.body.appendChild()

Quelle

2017-07-03 11:47:26

Jede Iteration überschreibt die vorherige. –

Ja, ich dachte das war der Punkt, da es eine Animation mit Worten ist –

Sie haben CSS positionrelative den span Elemente hinzuzufügen.

Code-Beispiel:

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>

Quelle

2017-07-03 11:56:11

JavaScript Elemente an ein div anhängen

Antwort

Verwandte Themen