JavaScript: how to give an HTML content to a variable?
Question
I'm studying JavaScript basics and today I built a simple html page which let the user to add/remove a list item. Well, I think I could be there (I know that there are a lot of better solutions, but hey, I'm just learning).
// 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); }
You can see full code here: https://jsfiddle.net/l_wel/cuvc0m5g/
The problem is: how you can see within the first function, I put a commented code. It inserts html content inside the new list item. Is there a better way to do it? I mean, what if i would the new list item to have the number of the list item into the ? Something like that:
- List item 1
- List item 2
- List item 3
etc.. etc..
I know I should use a counter, but I was not able to let the created list items to have all the original html content from the first list item without the need to rewrite it within the function.
Ok, sorry for my bad english and sorry if you think this is a very simple problem, but I tried for hours. I hope you understood what I'm trying to achieve. I think that without the comment it could work as well, depending on the project.
PS I don't know jQuery yet, I wanted to solve this using vanilla js.
3 answers
solution1
1 ACCPTED 2017-01-23 17:39:54
See if this works for you:
// 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>
solution2
0 2017-01-23 17:42:39
addListItem is a function which can accept parameters. for example, the forEach command is iterating the array and calling the addListItem for each of the items, forEach is calling the callback with two arguments, the first argument is the item itself, and the second is the index of the item in the array...
then you can use the arguments to display the data...
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 );
solution3
-1 2017-01-23 17:45:44
I know you said you didn't want to use JQuery ( http://api.jquery.com/append/ ), but it does make your life easier. For example, you could use the function below. Writing JavaScript is fun, but reading good open source JavaScript (like reading JQuery source) is a far better learning experience.
you are going to need to create a counter to get the list number:
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>);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.