Creating tag elements within new tag elements using JavaScript

Question

I am new to javascript, thus I'm trying to teach myself the basics without using packages like JQuery, in order to better understand the language.

My question is in regards to creating an html tag within another html tag using only javascript, I can't seem to do this without getting an error (posted at the bottom).

For example what I have been trying to do is make the element children of each other through the following:

<!doctype html>
<html>
<head>
</head>
<body>
    <script>
    var element1 = document.createElement("div");
    var element2 = document.createElement("svg");
    var element3 = document.createElement("rect");
    element1.setAttribute('id', 'div1');
    element2.setAttribute('id', 'out');
 //This is where I fall short
 //One way i have tried
    document.getElementById('div1').appendChild(element2);
    document.getElementById('out').appendChild(element3);
//another way I have tried
    document.getElementByClassName('div').appendChild(element2);
//last way I tried 
    document.getElementById('div1').innerHTML = element2;
</script>
</body>
</html

Although, i have been trying to make this work I have been coming up short and because of this I keep getting the error

 "TypeError: 'null' is not an object (evaluating 'document.getElementBy(Id/ClassName)
 ().innerHTML/appendChild')

Any help is greatly appreciated! Also, if it's not too much to ask, since i am still trying to understand the javaScript concepts please explain your response.

David Thomas · Accepted Answer · 2014-10-31 08:25:43Z

1

The problem is that document.getElementById('div1') can only work once the element is in the document, as it is you already have a reference to that node, however, so use that:

element1.appendChild (element2);

Or:

document.body.appendChild(element1);
document.getElementById ('div1').appendChild (element2);

Which appends the node to the <body> element, and then searches the document for the element by its id.

answered Oct 31, 2014 at 8:25

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

1 Comment

Luis Over a year ago

So in order to append a child element you don't have to keep reciting document.getElementById but rather just put the element reference plus .appendChild(inner element)?

Xlander · Accepted Answer · 2014-10-31 08:41:33Z

0

You have to append the elements to the body before getting the element as they don't exist in the DOM.

var element1 = document.createElement("div");
var element2 = document.createElement("svg");
var element3 = document.createElement("rect");
element1.setAttribute('id', 'div1');
element2.setAttribute('id', 'out');

//you missed these.
document.body.append(element1);
document.body.append(element2);

document.getElementById('div1').appendChild(element2);
document.getElementById('out').appendChild(element3);

edited Oct 31, 2014 at 8:41

answered Oct 31, 2014 at 8:25

Xlander

1,33112 silver badges24 bronze badges

2 Comments

Luis Over a year ago

sorry about the attribute code typo i just fixed it. In regards to appending to the DOM, with document.body.append(element1), is this necessary to make it part of the body tag? it doesn't do it automatically by putting a element in the body?

Xlander Over a year ago

Ok. By doing document.getElementById('div1'), you're searching for an element in the DOM having the id of div1. But the element does not exist in the DOM. So, before searching for it you will have to append it to the body.

Collectives™ on Stack Overflow

Creating tag elements within new tag elements using JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related