Question

我使用动态单词构建此循环动画，但我需要将所有跨度附加到div <div id"wordcloud"></div>中。我无法按照自己的意愿完成任务，所以我需要一些帮助。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

您在ID属性=

中缺少<div id[HERE]"wordcloud"></div>

然后将您创建的元素添加到

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

像这样：

＆＃13;

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);

＆＃13;

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

＆＃13;

如果您尝试使用通过javascript设置的位置，则需要添加一些CSS，如：

＆＃13;

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);

＆＃13;

#wordcloud {
    position: relative;
}

#wordcloud span {
    position: absolute;
}

＆＃13;

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

＆＃13;

Answer 2

您必须将position relative添加到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>

Answer 3

我认为这会有所帮助

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

执行此操作而不是document.body.appendChild（）

javascript将元素附加到div中

3 个答案: