I have written a post on innerHTML not to long ago which is one typical way of adding elements once a reference to a container element is obtained. However in this post I will be covering the subject in general, and not just the use of innerHTML which might not always be the best choice. There are of course alternatives to innerHTML that involve the use of a collection of methods, such as createElement, and appendChild.
Also there is some things to cover when it comes to html node lists as well, and how they are like arrays. However they are not instances of the Array constructor so one can not just use array prototype methods with them. So there is a little to cover when it comes to adding elements to an html document, and everything else that might branch off from this topic such as removing elements.
I have the source code examples that I am writing about here up on my test vjs github repository. That is where you would want to make a pull request of you think that one needs to be made, there is also the comments section where something can be brought up with one of the examples here. This is also the repository where I hold my source code examples for all my other posts, and where I am working on examples for the next time I come around to edit and expand this post.
The innerHTML property of an element object is one way to go about getting a string value of the innerHTML of an element, but it can also be used to set the innerHTML also with a string value of the desired innerHTML.
In this post I am not going to be going into detail about innerHTML as I have written a post on that all ready. However innerHTML is of course one option for making quick work of this when it comes to simple projects. When it comes to more advanced projects though there are some situations in which an alliterative way of doing this should be used.
So now that we have a very basic idea of what this is all about out of the way I can now move on to other ways of adding elements to an html document.
The alternative to using innerhtml as a way to create elements is to use the document.createElement method along with something like appendChild, and createTextNode. This is generally the preferred way to create and add new elements into an html document because it allows for access to element object reference right away. In addition I can set all kinds of properties to the created element before appending it the the html, or I can even not append it at all if I find that I do not want to for whatever the reason.
2 - The createTextNode method and creating paragraph elements, and any element that might require a text node
Some elements such as a p, span, and pre might require a text node value added to after creating it in order for the element to actually show some text. So in this section I think that it is called for to cover a few quick examples that have to do with adding text nodes to newly created elements with the create element method.
So for starters there are paragraph elements, and when creating them it is often called for to define what the value of the text node is for that element. One way to do so it to use the createTextNode method to create a text node with the desired text, and then append that to the newly created paragraph element.
There is more than one kind of line break depending on the operating system, but for the most part it is best to just go with the windows style one that contains a carriage return and then a line feed after. the reason why I say that it that that kind of line break will work o windows but will also work okay on just about every other operating system just fine also.
An example such as this could be expanded with additional methods to make a simple grid system, but this alone should help with the general idea of why it is that pre elements are useful in some situations.
So there is the process of injecting new elements into a container element, however I can not write about adding elements without at least writing a thing or two about removing them also. This section will then be a few examples that have to do with removing elements that are there ti begin with, and also maybe a few exercise that have to do with both adding and removing them also while I am at it. As such in this section I will be going over methods like the remove method of an element object reference, but also many other topics such as event attachment.
One of the first method to check out when it comes to removing elements might be the remove method of an element. Using this method is simple enough, once an reference to an element is obtained it is then just a matter of calling the remove element, and that is all there is to it.
Some times I might want to remove all elements that will meet a given condition. That is that I might want to use the document query selector all method to get a collection of elements, and then filter that collection by a given condition. I will then want to loop over all the filtered elements and call the remove method for all of them. One way to go about doing something like this would be to use one of the function prototype methods such as the call method to make the filter array prototype method work with an html collection and return an array of elements to each element that meets a given query, and condition in the form of a method that I given tot he array filter method. I can then use the array for each method to loop over all of the elements in the array that is returned by the array filter method and call the remove method for each of them.
This is very much a post on adding elements to an html document, so in this section I will not just be going over an example that makes use of the remove method, but also append child and the create element methods. The idea here this is to have an unordered list element with a single starting li element. The li element then have some additional nested elements in which one of them is a delete button, and the other is a span that contains some text for the list item. There will then also be some additional html that will contain input buttons that can be used to inject additional list items that are formatted this way. As you might expect the additional html out side of the list wil be used to create and append additional li elements and the delete button will be used to remove a single li element from the list.