Example 1: create element javascript with id
var btn = document.createElement('div');
btn.setAttribute("id", "div1");
Example 2: how to add elements in javascript html
//adding 'p' tag to body
var tag = document.createElement("p"); // <p></p>
var text = document.createTextNode("TEST TEXT");
tag.appendChild(text); // <p>TEST TEXT</p>
var element = document.getElementsByTagName("body")[0];
element.appendChild(tag); // <body> <p>TEST TEXT</p> </body>
Example 3: js create div
document.body.onload = addElement;
function addElement () {
// create a new div element
const newDiv = document.createElement("div");
// and give it some content
const newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
Example 4: js create element
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
Example 5: create and append element in javascript
//create and append element
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node);
Example 6: javascript create div in div
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this: (The "B" should be capitalized.)
document.getElementById('lc').appendChild(element);
HERE IS MY EXAMPLE:
<html>
<head>
<script>
function test() {
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: blue; height: 150px; width: 150px;
}" onclick="test();">
</div>
</body>
</html>
Comments
Post a Comment