Is there a way to dynamically add elements to the end of the body using vanilla JavaScript?
const newRecipe =
<div id = "container">
<div className="recipe App" id="four"
onClick={this.toggleRecipeList.bind(this)}>{this.state.recipeName}
</div>
<div style={{display:"none"}}>
{this.state.value4.split(",").map((e)=>
<p>{e}</p>)}
<button onClick={this.deleteRecipe}>Delete</button>
<button name="4" onClick={this.openEditBox}>Edit</button>
</div></div>
This hypothetical button would initiate the addition of the above element:
<button onClick={this.newRecipe.bind(this)}>Add Recipe</button>
The corresponding function could look like this:
newRecipe(){
document.body.appendChild({newRecipe});}
Alternatively, some have tried to use 'insertAdjacentElement' as shown below:
newRecipe(){
document.body.insertAdjacentElement("beforeend", {nRecipe});}
However, these attempts resulted in errors such as TypeError. Are there other methods to achieve this without toggling display properties?