This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
i saw this example and trying to understand the theory behind the html
if i use class in and id in why it doesn't work. why i cant remove the child element it gives me error
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
window.onload = function() {
var parent = document.getElementsByClassName("demo");
var child = document.getElementById("p1");
parent.removeChild(child);
};
</script>
</head>
<body>
<div class="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
</html>
but if i index parent node it work! i want to know how it work
var parent =document.getElementById("p1");
parent[0].removeChild(child);
Here, corrected to select single elements.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
window.onload = function() {
var parent = document.querySelector(".demo");
var child = parent.querySelector("#p1");
parent.removeChild(child);
};
</script>
</head>
<body>
<div class="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
</html>
Access element by className
.getElementsByClassName() will collect All elements with the given class. A single target can be selected if you use the bracket notation and the index number of the specific element. The following example will get the first (or only) element with the given class:
var parent = document.getElementsByClassName("demo")[0];
Or
var parent = document.querySelector('.demo');
Note the syntax for the given parameter of .querySelector() method:
'.demo' '#p1' 'div' '[name=radio]'
🠝 the dot prefix 🠝 the hash prefix 🠝 if there's no prefix this syntax denotes an
denotes a class denotes an id it's a tagName attribute
Demo
var parent = document.getElementsByClassName("demo")[0];
/* OR this line below */
// var parent = document.querySelector('.demo');
var child = document.getElementById("p1");
parent.removeChild(child);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
</html>
Related
I am learning to create an element dynamically in an html page using javascript. In this code I am trying to create a simple "h6" inside "div-1".
<!DOCTYPE html>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1"></div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText("Dynamically added text.")
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
</html>
there are two mistakes in your code
the first is that you used wrong "id" name div-1 instead of div1
also, innerText isn't a function
this is the code after the fix :)
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement() {
var elem = document.createElement("h6");
elem.innerText = "Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText= "Dynamically added text.";
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
Set the text content of a node: node.innerText = text
function constructElement(){
var elem = document.createElement("h6");
elem.innerText ="Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
This is directly not your answer but the algorithm is very similar
https://stackoverflow.com/a/56489422/10941112
(For the part of modals please put your own elements)
In case you need further clarification feel free to ask as this is not your direct answer
Also sorry to say but the question is a duplicate of -
Dynamically creating HTML elements using Javascript?
I'm trying to make a jquery button click to change all text to a specific text in the parent div but it seems that I can't access variables that are outside of the jquery function
I tried many stackoverflow solutions but none of them worked and most of them looked very similar to my code so I don't understand why it didn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="test">
<p>Click the button to get the tag names of the body element's children.</p>
</div>
<button>Try it</button>
<p id="demo"></p>
<script>
$(document).ready(function() {
var Dropdownchildren = document.getElementById("test").children
for (i = 0; i < Dropdownchildren.length; i++) {
console.log(Dropdownchildren[i].innerHTML)
// will work
$(Dropdownchildren[i]).click(function() {
console.log(Dropdownchildren[i].innerHTML)
// not work
})
}
})
</script>
</body>
</html>
I expected it to print the text but it didn't and even with global variables it couldn't access the variable and give me null or undefined.
You are declaring a global variable i in for loop you should declare it with let if you want to solve problem,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="test">
<p>Click the button to get the tag names of the body element's children.</p>
</div>
<button>Try it</button>
<p id="demo"></p>
<script>
$(document).ready(function() {
var Dropdownchildren = document.getElementById("test").children
for (let i = 0; i < Dropdownchildren.length; i++) {
console.log(Dropdownchildren[i].innerHTML)
// will work
$(Dropdownchildren[i]).click(function() {
console.log(Dropdownchildren[i].innerHTML)
// not work
})
}
})
</script>
</body>
</html>
This question already has answers here:
How to insert an element after another element in JavaScript without using a library?
(20 answers)
Closed 6 years ago.
I want to create a new element (a div) but instead of creating it as the last element, I want to create it between two elements. I created this simplified code of what I want to do:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function createDiv() {
var newDiv = document.createElement("div");
var txt = document.createTextNode("I'm the second div");
newDiv.appendChild(txt);
document.body.appendChild(newDiv);
}
</script>
</head>
<body>
<div class="first">
<p>I'm the first div</p>
</div>
<div class="third">
<p>I'm the third div</p>
</div>
<button type="button" name="button" onclick="createDiv()">Create the second Div</button>
</body>
</html>
Keep in mind that I want to use DOM only, not jQuery.
You can do the following by inserting before the third div
function createDiv() {
var newDiv = document.createElement("div");
var txt = document.createTextNode("I'm the second div");
newDiv.appendChild(txt);
var thirdDiv = document.getElementById("thrid");
thirdDiv.parentNode.insertBefore(newDiv, thirdDiv);
}
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="first">
<p>I'm the first div</p>
</div>
<div id="thrid" class="third">
<p>I'm the third div</p>
</div>
<button type="button" name="button" onclick="createDiv()">Create the second Div</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
I've created a div adiv how would I make this div a child of bdiv using Javascript?
Assuming adiv is created in Javascript and bdiv is created declaratively on the page:
document.getElementById("bdiv").appendChild(adiv);
Here is the sample code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function appendDiv()
{
var div1=document.getElementById('div1');//get the div element
var div2=document.createElement("div");//create a new div
div2.innerHTML="div2";
div1.appendChild(div2);// append to div
}
</script>
</head>
<body onload=appendDiv()>
<div id="div1">
div1
</div>
</body>
</html>
assuming you've got your bdiv and adiv references to HTMLElements:
bdiv.appendChild(adiv);
adds adiv to bdiv as a last children.
see a complete example :
http://jsfiddle.net/XFMUp/
You can use the appendChild function as follows:
<div id="diva">a</div>
<div id="divb">b</div>
The use the following javaScript to move the div having removed it.
var diva = document.getElementById("diva");
var divb = document.getElementById("divb");
diva.appendChild(divb);
Check out this example on jsFiddle