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