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>
Related
I have a div I have cloned that has elements inside it. I want to get the heading (h2) value out of the second child in the div
How do I go about this? I want to get the "bent over row" value from <div class="heading_add"><h2>Bent over row</h2>
// Make heading and button
let headingDiv = document.createElement('div');
headingDiv.classList = "heading_add"
let newh2 = document.createElement('h2');
newh2.innerHTML = itemRef.name;
headingDiv.appendChild(newh2)
videoCard.appendChild(headingDiv)
// Clones the div with video
newBtn.addEventListener('click', () =>{
const exercises = document.querySelector('.exercises');
let clone = videoCard.cloneNode(true); //Clones the div tags I'm trying to get
clone.defaultMuted = true;
let firstKid = clone.firstChild;
let secondChild = firstKid.firstChild.muted = true;
let meTest = firstKid.firstChild;
clone.classList.add('newVid');
console.log(meTest)
exercises.appendChild(clone)
});
<div class="videoCard newVid">
<div class="vid">
<video src="videostoredinfirebase" width="300" class="videoAdded" autoplay="" loop=""></video>
</div>
<div class="heading_add"><h2>Bent over row</h2>
<button class="add_video_btn">+</button></div>
</div>
Quick and dirty fix
function add() {
var myDiv = document.getElementById("test");
var divClone = myDiv.cloneNode(true);
document.body.appendChild(divClone);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="script.js" charset="utf-8"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test">
<h2>
This is a div
</h2>
</div>
<button onclick="add()">+</button>
</body>
</html>
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?
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>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
I'm a bit of a JavaScript newbie, but I do know SOME basics, so I thought I could handle this. I'm trying to show specific DIVS when a page loads, but have them easily hideable when another DIV is clicked on.
I found something similar to this code somewhere and started with it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
box 1</p>
<div id="box1">
<p>Text of box 1</p>
</div>
box 2</p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
box 3</p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
box 4</p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Great. This already does MOST of what I want it to do, except that I want it to re-show the hidden box titles when you click on a new box title, and hide the content of any box that is open.
So I tried this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
box 1</p>
<div id="box1">
<p>Text of box 1</p>
</div>
box 2</p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
box 3</p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
box 4</p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Which causes NOTHING to work. I'm guessing I have some syntax wrong or something, but I'm not sure what it is. I tried it a few different ways. I've seen multiple things called that way before.
If anyone can help me, I'm guessing it's a pretty simple solution. Thanks in advance.
Your show and hide functions are not designed to handle arrays of variables. You will need to cycle through an array that you feed to the function and hide/show each element in it.
So your show function will look something like this:
function show(ids) {
for(var i=0, l=ids.length; i < l; i++ } {
document.getElementById(ids[i]).style.display = 'block';
}
}
You are passing arrays to your functions and they are being processed as strings. I just changed that, and leveraged jQuery language instead of the lengthy JavaScript language. See a working Sample.
JS
function show( id ) {
for (var x=0; x<id.length; x++)
$('#' + id[x]).show();
}
function hide( id ) {
for (var x=0; x<id.length; x++)
$('#' + id[x]).hide();
}
UPDATE
my bad. Could have sworn I saw a jQuery tag.
function show( ids ) {
foreach (id in ids){
document.getElementById(id).style.display = 'block';
}
}
function hide( ids ) {
foreach (id in ids){
document.getElementById(id).style.display = 'none';
}
}