JavaScript：如何为变量提供HTML内容？

Question

我正在学习JavaScript基础知识，今天我构建了一个简单的html页面，让用户可以添加/删除列表项。 好吧，我想我可以在那里（我知道有很多更好的解决方案，但是，嘿，我只是在学习）。

  // the function that adds a list item function addListItem () { var newLi = document.createElement("li"); newLi.className = "listItem"; // newLi.innerHTML = "<h3>List item</h3> <p>This is a simple list item</p>"; list.appendChild(newLi); }

你可以在这里看到完整的代码： https ： //jsfiddle.net/l_wel/cuvc0m5g/

问题是：如何在第一个函数中看到，我放了一个注释代码。 它在新列表项中插入html内容。 有没有更好的方法呢？ 我的意思是，如果我将新的列表项目包含在列表项的编号中，该怎么办？ 像这样的东西：

清单项目1
清单项目2
清单项目3

等..等..

我知道我应该使用一个计数器，但是我无法让创建的列表项具有第一个列表项中的所有原始html内容，而无需在函数内重写它。

好的，抱歉我的英语不好而且抱歉，如果你认为这是一个非常简单的问题，但我试了好几个小时。 我希望你明白我想要实现的目标。 我认为没有评论它也可以工作，取决于项目。

PS我还不知道jQuery，我想用vanilla js解决这个问题。

Answer 1

看看这是否适合您：

 // store the list var list = document.getElementById("list"); var number = 1; // the function that adds a list item function addListItem () { number++; var newLi = document.createElement("li"); newLi.className = "listItem"; newLi.innerHTML = "<h3>List item</h3> <p>This is a simple list item " + number + "</p>"; list.appendChild(newLi); } // the function that removes the last list item function removeListItem () { number--; var ulList = document.querySelectorAll("listItem"); var lastLi = list.lastElementChild; var containerLi = lastLi.parentNode; containerLi.removeChild(lastLi); } // add a list item var btnAdd = document.getElementById("btnAdd"); if(btnAdd.addEventListener) { btnAdd.addEventListener("click", addListItem, false); } else { btnAdd.attachEvent("click", addListItem, false); } // remove the last list item var btnRemove = document.getElementById("btnRemove"); if(btnRemove.addEventListener) { btnRemove.addEventListener("click", removeListItem, false); } else { btnAdd.attachEvent("click", removeListItem, false); }

 body { font-family: monospace; background: #1e2530; color: #cce8ff; } .top { text-align: center; } #list { list-style-type: none; padding: 0; margin: 10px; } .listItem { background: #cce8ff; color: #1e2530; margin-bottom: 10px; padding: 5px 0 5px 10px; border-radius: 5px; }

 <body> <div class="top"> <h2>challenge #8</h2> <button id="btnAdd">Add an item list</button> <button id="btnRemove">Remove an item list</button> </div> <ul id="list"> <li class="listItem"> <h3>List item</h3> <p>This is a simple list item 1</p> </li> </ul> </body>

Answer 2

addListItem是一个可以接受参数的函数。 例如， forEach命令迭代数组并为每个项调用addListItem ，forEach用两个参数调用回调，第一个参数是项本身，第二个参数是数组中项的索引。 ..

然后你可以使用参数来显示数据......

var items = ['Dog','Cat','Mouse'];

function addListItem( title, index ) {
    var newLi = document.createElement("li");
    newLi.className = "listItem";
    newLi.innerHTML = "<h3>"+title+"</h3> " + index;
    list.appendChild(newLi);
}

items.forEach( addListItem );

Answer 3

我知道你说你不想使用JQuery（ http://api.jquery.com/append/ ），但它确实让你的生活更轻松。 例如，您可以使用以下功能。 编写JavaScript很有趣，但阅读好的开源JavaScript（比如阅读JQuery源代码）是一种更好的学习体验。

您将需要创建一个计数器来获取列表编号：

var lst = $('ul.mylist') //class is my list, if ul.mylist doesn't exist use append to append it to the document
for(let i = 0; i < [number of elements]; i++) {
  lst.append('<li>List Item' + i + '</li>);
}

JavaScript：如何为变量提供HTML内容？

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-01-23 17:39:54

解决方案2
0 2017-01-23 17:42:39

解决方案3
-1 2017-01-23 17:45:44

JavaScript：如何为变量提供HTML内容？

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-01-23 17:39:54

解决方案2 0 2017-01-23 17:42:39

解决方案3 -1 2017-01-23 17:45:44

解决方案1
1 已采纳 2017-01-23 17:39:54

解决方案2
0 2017-01-23 17:42:39

解决方案3
-1 2017-01-23 17:45:44