Creating a new element with javascript

Question

I\'m trying to create a new li element using a text input. The problem is while the text is appearing, it doesn\'t to create an actual li element that

Answer 1

: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article. ref for more info

You can add the created list element to this

1. tags at different possible positions as show below.

   var listItem = document.createElement("li"); // Create li element.
   listItem.innerHTML = `taskInput`;
   
   var list = document.getElementById("sectionlist");
   list.appendChild(listItem);
   

   const button = document.getElementById('submit');
   button.addEventListener ("click", () => {
   	var taskInput = document.getElementById('task').value;
   
   	if (taskInput !== '') {
   		var listItem = document.createElement("li"); // Create li element.
   		listItem.innerHTML = taskInput;
   
   		var val = $("input[name='Radios']:checked").val();
       
   		var list = document.getElementById("sectionlist");
   		// https://stackoverflow.com/a/13166249/5081877
   		var listCount = $("#sectionlist li").length;
   		var xpath = '//section/ol/li['+listCount+']';
   		if( val == "Option 1") {
        		list.appendChild(listItem);
   		} else if ( val == "Option 2" ) {
   			var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
   			list.insertBefore(listItem, element);
   		} else if ( val == "Option 3" ) {
   			// https://stackoverflow.com/a/2470148/5081877
   			var newElem = new XMLSerializer().serializeToString(listItem);
   			list.insertAdjacentHTML('afterbegin', newElem);
   		}
   	} else {
   		alert("You have to type a task!");
   	}
   });

   body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}
   span {
       /* style this span element so we can display nicely, this stlying is not neccessary */
       margin: 10px 0;
       display: block;
       width: 100%;
       float: left;
   }
   
   input[type="radio"] {
       /* hide the inputs */
       opacity: 0;
   }
   
   /* style your lables/button */
   input[type="radio"] + label {
       /* keep pointer so that you get the little hand showing when you are on a button */
       cursor: pointer;
       /* the following are the styles */
       padding: 4px 10px;
       border: 1px solid #ccc;
       background: #efefef;
       color: #aaa;
       border-radius: 3px;
       text-shadow: 1px 1px 0 rgba(0,0,0,0);
   }
   
   input[type="radio"]:checked + label {
       /* style for the checked/selected state */
       background: #777;
       border: 1px solid #444;
       text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
       color: white;
   }

   
   
   
     
   Insert Element into the DOM tree at a specified position.
     
   	
   	Node.appendChild() - Insert as END Ele.
     
     
   	
   	Node.insertBefore() - Insert as Last but one Ele.
     
     
   	
   	Element.insertAdjacentHTML() - Insert as Start Ele.
     
   
   
   Start your list!
   
       
       Create
   
   
   
     
   
       
   Default list Data
     
   
   

   For more information regarding inserting element you can refer my previous post.

   @See

   • Element.insertAdjacentElement()
   • Element.insertAdjacentHTML()
   • Node.appendChild()
   • Node.insertBefore()