Question

我被框架所破坏，想知道如何简单地使用框架。 Javascript处理这个。基本上，我希望我的JavaScript输出一个包含我的数组中所有项目的列表。代码如下：

的javascript

<ul id="listcontent"></ul>

HTML

.bar {
    width: 200px;
    height: 25px;
    background: #6FD967;
    border-right: 150px solid green;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        transparent 1px,
        green 7px
      ),
      linear-gradient(
        to bottom,
        transparent,
        transparent
      )
  }

Answer 1

使用document.createElement创建元素，element.textContent填充文本，parent.appendChild将其添加到其父元素。

如果您希望<li>元素包含的HTML不仅仅是纯文本，也可以使用element.innerHTML或element.appendChild代替element.textContent。

这是一个可运行的示例，基于您的代码：

＆＃13;

function addrain() {
  var element = ['apple', 'orange', 'banana'];
  for (var i = 0; i < element.length; i++) {
    // Create DOM element
    var li = document.createElement('li');
        
    // Set text of element
    li.textContent = element[i];

    // Append this element to its parent
    document.getElementById('listcontent').appendChild(li);
  }
}

addrain();

＆＃13;

<ul id="listcontent"></ul>

＆＃13;

Answer 2

您只需为每个项目创建一个DOM元素，然后将该元素附加到列表中。

＆＃13;

function addrain(){
    var element = ['apple', 'orange', 'banana'];
    for (var i = 0; i < element.length; i++){ 

      // Create DOM element
      let childNode = document.createElement('li');

      // Set content to current element
      childNode.innerHTML = element[i];

      // Add DOM Node to list
      document.getElementById('listcontent').appendChild(childNode);
    }
}

addrain();

＆＃13;

<ul id="listcontent"></ul>

＆＃13;

Answer 3

尝试将此作为您的功能：

function addrain(){
    var element = ['apple', 'orange', 'banana'];
    for (var i = 0; i < element.length; i++){ 
        var li = document.createElement('li'); // Create an <li>
        li.appendChild(document.createTextNode(element[i])); // Add the name of the fruit
        document.getElementById('listcontent').appendChild(li); // Append the <li> to the <ul>
    }
}

https://jsfiddle.net/xcqegL3b/

Answer 4

const elements = ["orange", "apple", "banana"];

const list_element_to_insert = document.getElementById('listcontent'); // get the html element

// i have used mapping first to create a li element. then transform the 
// returned map list into string by join
list_element_to_insert.innerHTML = `${elements.map(element => `<li>${element}</li>`).join('')}`;

<ul id="listcontent"></ul>

从数组中追加动态li

4 个答案: