Building a JS Function to dynamically create HTML elements and nest them inside each other

Question

I've created the below function to dynamically create HTML elements and append them wherever I want. The console doesn't log any errors when it runs, but the second element (<p>) doesn't write to the document.

I'm thinking the error is something related to the "createdDiv" variable, but I haven't been able to isolate what is going wrong.

Any help would be greatly appreciated!

//Array of elements to be created

var createdElements = [
    [ 'div', 'Class0', 'ID0'],
    ['p', 'Class1', 'ID1']      
];


//function to create and append elements to document

function createHTML( typeOfCreatedElement ,createdElementClass, createdElementId, locationForCreatedElement ){
    var createdElement = document.createElement( typeOfCreatedElement );
    createdElement.className = createdElementClass;
    createdElement.id = createdElementId;

    locationForCreatedElement['appendChild']( createdElement );

    return createdElement;
}


//run function 2x; 
//createdDiv successfully writes to the document, but createdParagraph disappears into a black hole...

var createdDiv = createHTML( createdElements[0][0], createdElements[0][1], createdElements[0][2], document.body );
var createdParagraph = createHTML( createdElements[1][0], createdElements[1][1], createdElements[1][2], createdDiv );

Actually your code seems to work as it is. To see the paragraph on a page, you need to add some content to it. — Teemu
– Teemu, Commented Dec 12, 2015 at 18:18

gurvinder372 · Accepted Answer · 2015-12-12 18:25:18Z

1

can you try with this update createHTML method()

function createHTML( typeOfCreatedElement ,createdElementClass, createdElementId, locationForCreatedElement ){
    var createdElement = document.createElement( typeOfCreatedElement );
    createdElement.className = createdElementClass;
    createdElement.id = createdElementId;
    createdElement.innerHTML = "this is a sample text for element type " + typeOfCreatedElement;

    locationForCreatedElement.appendChild( createdElement ); //line that I have changed.

    return createdElement;
}

appendChild is a method, not a property.

edited Dec 12, 2015 at 18:25

answered Dec 12, 2015 at 17:58

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Teemu Over a year ago

OP seems to use appendChild like a method in their code. Using dot notation instead of bracket notation doesn't change anything.

Teemu Over a year ago

I added a fiddle link in my comment to OP's post. Their code seems to work.

gurvinder372 Over a year ago

@Teemu okay, I have added the innerHTML property as per your suggestion in your comment. All credit to you for detecting this.

Teemu Over a year ago

Hey! Where is my credit, I haven't got anything ; ). Just a joke, inresponsive questionnaires are a sort of a plague at SO.

Collectives™ on Stack Overflow

Building a JS Function to dynamically create HTML elements and nest them inside each other

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related